web-dev-qa-db-fra.com

href = "#" Aller en haut de page - Empêcher?

J'ai une page avec quelques fonctions jQuery. Le code HTML sur la page ressemble à ceci:

<a href="#" class="service">Open</a>

Lorsque je clique sur le bouton Ouvrir, un panneau masqué glisse. Le jQuery lui-même fonctionne très bien, mais lorsque je clique sur le bouton, il me conduit également en haut de la page.

Est-ce le comportement par défaut et comment puis-je empêcher chaque href="#" de m'emmener en haut de la page.

Remarque: je pourrais ajouter des identifiants et dire au href de diriger vers cet identifiant. Je ne veux pas le faire pour diverses raisons (y compris l'ajout de code inutile).

anchorhrefhashtag
44
L84

Dans votre gestionnaire d'événements, ajoutez e.preventDefault(); (en supposant que e est le nom de la variable contenant l'événement):

$('.service').click(function(e) {
    e.preventDefault();
});
61
icktoofay
<a href="#!" class="service">Open</a>
82
MyroslavN
<a href="#" onclick="return false;" class="service">Open</a>

OU 

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function()
   {

       return false;

   });
});

OU 

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function(e)
   {

       e.preventDefault();

   });
});

OU 

<a href="#" onclick="event.preventDefault();" class="service">Open</a>
23
Ryan
$('service').click(function() {
<your code>
return false;
});

return false remplace le comportement standard de la balise "a" et empêche le navigateur de revenir en haut de la page lorsque vous cliquez dessus.

0
Andreas