web-dev-qa-db-fra.com

Meilleure façon de créer un lien <a> avec href vide

Je veux créer un lien, et pour forcer l'ancrage du lien en utilisant javaScript, j'ai essayé ce qui suit: -

<a id="ServerSort" href="#" style="text-decoration:underline">

cela a bien fonctionné mais la page perdra sa position actuelle après avoir cliqué sur <a> lien.

J'ai besoin du lien pour avoir un href, car j'ai besoin de la souris pour changer le curseur quand on le passe?

quelqu'un peut-il me conseiller?

javascriptjqueryhtmlcsshtml5
35
John John

La meilleure façon de le faire est de définir le href sur #0 comme ça:

<a href="#0">blabla</a>

Voici pourquoi: vous n'aurez JAMAIS rien sur la page avec l'ID 0 (si vous le faites, il y a quand même un problème), et depuis #0 n'existe pas, l'événement click ne vous ramène pas en haut de la page. Vous n'avez PAS besoin de JavaScript pour cela et vous ne devez pas utiliser JavaScript.

20
Bene
 .clickable {
   cursor: pointer;
 }
 <a id="ServerSort" class="clickable">Foo</a>
4
James Sumners

Quelques options existent:

<a id="ServerSort" href="javascript:">

<a id="ServerSort" href="javascript://">

<a id="ServerSort" href="javascript:void(0)">

Celles-ci sont considérées comme de mauvaises pratiques et je ne recommanderais jamais quelque chose comme ça pour la production. J'utilise généralement la première option lors de la création de liens vers des pages qui n'existent pas pendant la phase de développement.

De préférence, je n'utiliserais pas du tout, je passe à un span dans l'exemple ci-dessous:

<span id="ServerSort" onclick="return false">Test Link</span>

et il suffit de styliser un élément en conséquence:

    <style type="text/css">
    #ServerSort {
        text-decoration:underline;
    }
        #ServerSort:hover {
            color:red;
            cursor:pointer;
        }
</style>

J'insère le js et j'écris juste un ici pour montrer une approche différente qui évite d'avoir à remplacer le comportement par défaut.

4
justinlabenne

Tu peux essayer:

<a id="ServerSort" href="#" style="text-decoration:underline" onclick='return false'>

Ou vous pouvez utiliser jQuery event.preventDefault () .

2
Aray