web-dev-qa-db-fra.com

Existe-t-il un moyen de lier un élément <button> à un emplacement sans le placer dans une balise <a href ...?

Je me demandais s'il y avait un moyen d'obtenir un HTML <button> élément pour créer un lien vers un emplacement sans le placer dans un <a href... tag?

Le bouton ressemble actuellement à:

<button>Visit Page Now</button>

Ce que je préférerais pas avoir:

<a href="link.html"><button>Visit Page Now</button></a>

Le bouton n'est pas utilisé dans un formulaire, donc <input type="button"> n'est pas une option. Je suis simplement curieux de voir s’il existe un moyen de lier cet élément particulier sans avoir besoin de l’envelopper dans un <a href tag.

Au plaisir d'entendre certaines options/opinions.

javascripthtmlbuttonhyperlink
42
Dan

Javascript en ligne:

<button onclick="window.location='http://www.example.com';">Visit Page Now</button>

Définir une fonction en Javascript:

<script>
    function visitPage(){
        window.location='http://www.example.com';
    }
</script>
<button onclick="visitPage();">Visit Page Now</button>

ou en Jquery

<button id="some_id">Visit Page Now</button>

$('#some_id').click(function() {
  window.location='http://www.example.com';
});
67
aiham

Voici une solution qui fonctionnera même lorsque JavaScript est désactivé:

<form action="login.html">
    <button type="submit">Login</button>
</form>

L'astuce consiste à entourer le bouton de son propre <form> tag.

Personnellement, je préfère le <button>tiquette, mais vous pouvez le faire avec <input> ainsi que:

<form action="login.html">
    <input type="submit" value="Login"/>
</form>
21
Pacerier

Fais juste ça

<button OnClick=" location.href='link.html' ">Visit Page Now</button>

Bien que cela fasse longtemps que je n’ai pas touché JavaScript, peut-être que location.href est obsolète? Quoi qu'il en soit, c'est comme ça que je le ferais.

6
Ken Wayne VanderLinde

Eh bien, pour un lien, il doit y avoir une balise de lien autour. vous pouvez également créer une classe CSS pour le bouton et affecter cette classe à la balise link. comme,

Le CSS

#btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;}

Le HTML

<a href="btnlink.html" id="btn"></a>
6
themajiks

Vous pouvez en faire un bouton non soumis (<button type="button">) et accrocher quelque chose comme window.location = 'http://where.you.want/to/go' dans son gestionnaire onclick. Cela ne fonctionne pas sans que javascript soit activé.

Ou vous pouvez en faire un bouton d'envoi et faire une redirection sur le serveur, bien que cela nécessite évidemment une sorte de logique côté serveur, mais le bon côté des choses est que cela ne nécessite pas de javascript.

(en fait, oubliez la deuxième solution - si vous ne pouvez pas utiliser un formulaire, le bouton d'envoi est désactivé)

5
tdammers

LES LIENS SONT TRICKY

Considérez les astuces que <a href> connait par défaut mais que les liens javascript ne vous conviennent pas. Sur un site Web décent, tout ce qui veut se comporter comme un lien doit implémenter ces fonctionnalités d’une manière ou d’une autre. À savoir:

  • Ctrl + Clic: ouvre le lien dans un nouvel onglet
    Vous pouvez simuler ceci en utilisant un window.open () sans argument de position/size
  • Maj + clic: ouvre le lien dans une nouvelle fenêtre
    Vous pouvez simuler cela avec window.open () avec la taille et/ou la position spécifiées
  • Alt + Clic: cible de téléchargement
    Les gens utilisent rarement celui-ci, mais si vous insistez pour le simuler, vous devez écrire un script spécial côté serveur qui répond avec les en-têtes de téléchargement appropriés.

LA SOLUTION FACILE

Maintenant, si vous ne voulez pas simuler tout ce comportement, je suggère d'utiliser <a href> et de le styler comme un bouton, puisque le bouton lui-même est à peu près une forme et un effet de survol. Je pense que s’il n’est pas sémantiquement important d’avoir seulement "le bouton et rien d’autre", <a href> est la voie du samouraï. Et si vous vous inquiétez de sémantique et de lisibilité, vous pouvez également remplacer l'élément button lorsque votre document est prêt (). C'est clair et sécuritaire.

4
dkellner

<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

Je viens juste de comprendre cela, et il se connecte parfaitement à une autre page sans avoir mes paramètres de lien par défaut sur les classes de boutons! :)

2
Loni Negron

Ici, il utilise jQuery. Voyez-le en action sur http://jsfiddle.net/sQnSZ/

<button id="x">test</button>

$('#x').click(function(){
    location.href='http://cnn.com'
})
1
Hussein