web-dev-qa-db-fra.com

liens hypertextes jQuery - valeur href?

Sur mon site Web, jQuery est utilisé pour accrocher les événements d’éléments, à savoir des hyperliens. Comme ces hyperliens effectuent uniquement des actions sur la page en cours et ne mènent nulle part, j’ai mis un attribut href de "#" dans:

<a href="#">My Link</a>

Cependant, dans certains navigateurs, la page défile de haut en bas, ce qui est évidemment un comportement indésirable. J'ai essayé d'utiliser une valeur href vierge ou de ne pas en inclure, mais la souris ne change pas en curseur de la main lors du survol.

Que dois-je mettre là-bas?

jqueryhyperlinkhref
45
Tom
$('a').click(function (event) 
{ 
     event.preventDefault(); 
     //here you can also do all sort of things 
});

Ensuite, vous pouvez mettre dans chaque href ce que vous voulez et jQuery déclenchera la méthode preventDefault() et vous ne serez pas redirigé vers cet endroit.

50
Bogdan Constantinescu

Les "ancres" qui existent uniquement pour fournir un événement click, mais ne lient pas réellement à un autre contenu, devraient vraiment être button elements car c'est ce qu'elles sont vraiment.

Il peut être appelé ainsi:

<button style="border:none; background:transparent; cursor: pointer;">Click me</button>

Et bien sûr, les événements de clic peuvent être attachés aux boutons sans que le navigateur ne saute au sommet, et sans ajouter de javascript supplémentaire tel que onclick = "return false;" ou event.preventDefault ().

39
talentedmrjones

Vous devriez vraiment mettre un vrai lien là-bas. Je ne veux pas avoir l'air d'un pédant, mais c'est une assez mauvaise habitude à prendre. JQuery et Ajax devraient toujours être la dernière chose que vous implémentez. Si vous avez un lien qui ne va nulle part, vous ne le faites pas correctement. 

Je ne vous casse pas la gueule, je veux dire avec la meilleure intention. 

36
gargantuan

Ajouter return false à la fin de votre gestionnaire de clics, ceci évite que le gestionnaire par défaut du navigateur ne tente de rediriger la page:

$('a').click(function() {
// do stuff
return false;
});
9
roryf

en utilisant jQuery, vous voudrez peut-être n’adresser que ceux qui ont un '#'

$('a[href=#]').click(function(){return false;});

si vous utilisez la dernière version de jquery (1.3.x), il n'est pas nécessaire de la lier à nouveau lorsque la page change 

$('a[href=#]').live('click', function(){return false;});
5
djspark

vous devriez utiliser <a href="javascript:void(0)" ></a> au lieu de <a href="#" ></a> 

4
mohsen

Je me demande pourquoi personne ne l’a dit ici plus tôt: pour éviter que <a href="#"> ne défile la position du document en haut, utilisez simplement <a href="#/"> à la place. Ce n'est que du HTML, pas besoin de JQuery. Utiliser event.preventDefault();, c'est trop!

3
Best

Je sais que c'est vieux mais wow, il y a une solution si facile.

supprimez entièrement le "href" et ajoutez simplement une classe qui effectue les opérations suivantes:

.no-href { cursor:pointer: }

Et c'est tout!

1
Justin

Je j'ai presque eu ce problème et c'était trèstrompant. Je réponds au cas où quelqu'un se retrouverait dans la même situation.

  1. Je pensais que j'avais ce problème
  2. Mais j’utilisais return false et javascript: void (0);
  3. Ensuite, une différence distincte de problème est apparue:
  4. J'ai réalisé que cela n'allait pas TOUT jusqu'en haut - et ma zone de problème se situait près du bas de la page, donc ce saut était étrange et ennuyeux.
  5. J'ai réalisé que j'utilisais fadeIn () [bibliothèque jQuery], et que pendant un court moment mon contenu était affiché: aucun
  6. Et puis mon contenu a étendu la portée de la page! Causer ce qui ressemble à un saut!
  7. Utiliser la visibilité cachée bascule maintenant .. 

J'espère que cela aide la personne coincée avec des sauts!

0
amurrell