web-dev-qa-db-fra.com

Empêcher le lien href = "#" de modifier le hachage de l'URL

J'ai un site qui profite déjà du hachage de l'URL et je ne veux pas que cela change. Quand j'utilise Zurb Foundation et utilise href="#" pour l'élément de menu, cliquer dessus supprime la valeur de hachage précédente.

Comment puis-je remplacer ce comportement?

Mise à jour: Je pense qu'il est préférable de conserver l'élément car, lorsque je le modifie, le style lié à cet élément HTML est modifié. Lors de l’utilisation avec un framework de conception, je préfère toujours rester avec les conventions par défaut et non avec une masse avec des attributs css prédominants.

merci.

javascripthtmlzurb-foundation
39
Idan Shechter

S'il vous plaît lire sur amélioration progressive et JavaScript discret .

Vous devriez (presque) ne jamais avoir href="#". C'est un lien vers une ancre non définie (qui sera le haut de la page). Les personnes qui l'utilisent le font normalement parce qu'elles souhaitent suspendre JavaScript.

Si vous allez avoir un lien, alors il devrait pointer vers un endroit utile. En règle générale, il s’agit d’une autre page qui utilise la technologie côté serveur pour obtenir le même effet (bien que moins rapidement) que celui fourni par JavaScript. Vous pouvez alors empêcher le comportement normal du lien.

Par exemple:

<a href="/foo/bar" class="whatever">Foo: Bar</a>

Avec le script:

addEventListener('click', function (ev) {
    if (ev.target.classList.contains('whatever')) {
        ev.preventDefault();
        loadWithAjax(ev.target.href);
    }   
});

Si le JavaScript fait quelque chose qui ne peut pas avoir une fonctionnalité équivalente exprimée dans un lien, vous ne devriez pas utiliser un lien en premier lieu. Utiliser un <button>, et envisagez sérieusement de l'ajouter au document en utilisant JavaScript/DOM au lieu de HTML.

(NB: Beaucoup de gens veulent supporter des navigateurs plus anciens qui ne reconnaissent pas classList ou addEventListenervérifier le support du navigateur et trouver des routines de compatibilité reste un exercice. Pour le lecteur, utiliser YUI, jQuery ou similaire est une approche pour traiter de la compatibilité.)

27
Quentin

Vous pouvez écouter l'événement click et appeler preventDefault pour empêcher le navigateur de définir le hachage.

Exemple avec jQuery:

$('.mylink').click(function(event){
    event.preventDefault();
});
40
Ben Hutchison

Au lieu d'avoir # en href, vous pouvez utiliser javascript:; in href qui ne laissera pas l’url changer.

<a href="javascript:;">:Link</a>
30
Dead Man

Au lieu d'utiliser "#", utilisez "javascript: void (0)". Voir ce lien pour plus d'informations Quelle valeur "href" dois-je utiliser pour les liens JavaScript, "#" ou "javascript: void (0)"?

11
Chinmaya Hegde

Utilisez simplement ceci:

<a href="javascript:void()">text</a>
10
Abhishek Goel

Cela fonctionne pour moi.

$(document).on('click', 'a', function (e) {
    if ($(this).attr('href') == '#') {
        e.preventDefault();
    }
});
5
Mohamad Hamouday

J'ai fait ce qui suit pour empêcher toutes les balises avec l'attribut href = "#" d'effectuer la navigation (à l'aide de JQuery):

$('a[href$="#"]').click(function (event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;

        });
4
Daniel Castillo

Avez ci-dessous le code dans votre bibliothèque par défaut.
Ceci utilisera la valeur href pour l'événement click et si la valeur hash (#) est trouvée, cela empêchera l'événement par défaut qui évitera la redirection vers la valeur href.

$(document).on('click', 'a', function (e) {
    if ($('#'+e.target.id).attr('href')=='#') {
        e.preventDefault();
    }
});
2
Dorjee Karma

Le moyen le plus simple de le faire est <a href="#hash" onclick="event.preventDefault();"></a>

1
Mark Ibanez

Ma solution est un peu la même, en utilisant Javascript:

-> Remplacer

<a href=#foo class="ouvrir">Newsletter</a>

par:

<a href="javascript://" class="ouvrir">Newsletter</a>

Et le Javascript:

<script>
    $('.ouvrir').click(function(event){
        window.location.href = "#foo";
        history.pushState('', document.title, window.location.pathname);
    });
</script>
1
Guillaume