Créer un lien HTML qui ne fait rien (littéralement rien)

Question

Je veux un lien qui ne fasse rien. Je ne veux pas cela :

<a href="#">

car l'URL devient alors something.com/whatever/# .

La seule raison pour laquelle je veux un lien est que l'utilisateur puisse voir qu'il peut cliquer sur le texte. JavaScript est utilisé pour effectuer une action, donc je n'ai pas besoin que le lien aille quelque part, mais j'ai besoin qu'il ressemble à un lien !

Je pourrais utiliser un attribut de données et me dire en CSS de faire en sorte que les éléments ressemblent à des liens s'ils ont cet attribut, mais cela semble un peu exagéré.

Answer 1

Les éléments suivants empêcheront l'exécution de votre href

<a href="#" onclick="return false;">

Si vous utilisez jQuery, event.preventDefault() peut être utilisé

Answer 2

Essayez ceci :

<a href="javascript:void(0);">link</a>

Answer 3

En HTML5, c'est très simple. Il suffit d'omettre l'élément href attribut.

<a>Do Nothing</a>

En MDN sur l'attribut href de la balise a :

href

C'était l'unique attribut requis pour les ancres définissant un lien source hypertexte, mais il n'est plus requis en HTML5.

Qu'en est-il du curseur en cas de survol ?

Les styles par défaut d'un navigateur peuvent ne pas transformer le curseur en pointeur, par exemple a sans href . Vous pouvez changer cela de manière universelle avec le CSS suivant.

a {
    cursor: pointer;
}

<a>Do Nothing</a>

Cependant, il est probablement préférable d'être plus sélectif et de ne l'appliquer qu'aux éléments auxquels vous avez l'intention d'ajouter des gestionnaires d'événements.

Pourquoi ne pas le rendre focalisable par tabulation ?

Il suffit d'ajouter tabindex="0" à l'élément.

<a tabindex="0">Do Nothing</a>

Est-il judicieux d'utiliser un a sans lien ?

En général, non, il est préférable d'utiliser un button et de le styliser à l'aide d'une feuille de style CSS. Mais quel que soit votre choix, évitez d'utiliser un élément arbitraire comme div lorsque c'est possible, car ce n'est pas du tout sémantique.

Answer 4

Correct :

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

Answer 5

N'en faites pas un lien (bien qu'il soit préférable de le faire) et stylisez-le avec CSS pour qu'il ressemble à un lien :

p.not-a-link { text-decoration: underline; cursor: pointer } 

Ou mieux encore, il suffit de faire un lien et de laisser la fonction javascript utilisée e.preventDefault() pour empêcher le lien.

Ajoutez également le lien vers la page href afin que les utilisateurs qui n'ont pas activé JS puissent toujours l'utiliser (comme solution de repli).