web-dev-qa-db-fra.com

Comment faire une balise d'ancrage se référer à rien?

J'utilise jQuery, je dois faire en sorte que certaines balises d'ancrage n'effectuent aucune action.

Je l'écris habituellement comme ceci:

<a href="#">link</a>

Cependant cela fait référence au haut de la page!

jqueryhtml
130
ahmed

Si vous ne voulez pas qu'il pointe vers quoi que ce soit, vous ne devriez probablement pas utiliser la balise <a> (ancre).

Si vous voulez que quelque chose ressemble à un lien mais ne se comporte pas comme un lien, il est préférable d'utiliser l'élément approprié (tel que <span>) puis de le styler à l'aide de CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

De plus, étant donné que vous avez étiqueté cette question "jQuery", je suppose que vous souhaitez associer un gestionnaire d'événements de clic. Si c'est le cas, faites simplement la même chose que ci-dessus, puis utilisez quelque chose comme le JavaScript suivant:

$('#fake-link-1').click(function() {
    /* put your code here */
});
95
Tyson

Il y a quelques solutions moins que parfaites:

1. Lien vers une fausse ancre 

<a href="#">

Problème: cliquer sur le lien pour revenir en haut de la page

2. Utilisation d'une balise autre que 'a'

Utilisez une balise span et utilisez le jquery pour gérer le clic

Problème: interrompt la navigation au clavier, il faut changer manuellement le curseur de survol

3. Lien vers une fonction javascript void 

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

Problème: des pauses lors de la liaison d'images dans IE

Solution

Puisque tous ces problèmes ont des problèmes, la solution que j'ai choisie consiste à créer un lien vers une fausse ancre, puis à renvoyer false à partir de la méthode onClick:

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

Pas la plus concise des solutions, mais elle résout tous les problèmes avec les méthodes ci-dessus.

232
zaius

Pour ne rien faire du tout, utilisez ceci:

<a href="javascript:void(0)"> ... </a>
34
Philippe Leybaert

La bonne façon de gérer cela est de "rompre" le lien avec jQuery lorsque vous gérez le lien.

HTML

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

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Ces deux derniers appels empêchent le navigateur d'interpréter le clic.

33
Oli

Qu'entendez-vous par rien?

<a href='about:blank'>blank page</a>

ou

<a href='whatever' onclick='return false;'>won't navigate</a>
21
KristoferA

Je pense que tu peux essayer 

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

Le seul problème que je vois ici est la sécurité de haut niveau du navigateur peut être demandé lors de l'exécution de javascript.

Bien que ce soit l’un des moyens les plus simples de 

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

cela devrait être utilisé avec parcimonie

Lisez cet article pour quelques indications https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

13
Rutesh Makhijani

Il y a tellement de façons de le faire comme 

Ne pas ajouter et attribut href

<a name="here"> Test <a>

Vous pouvez ajouter un événement onclick au lieu de href comme 

<a name="here" onclick="YourFunction()"> Test <a>

Ou vous pouvez ajouter une fonction vide comme celle-ci qui serait la meilleure façon 

<a href="javascript:void(0);"> 
<a href="javascript:;">
13
Punit Gajjar

Cette réponse devrait être mise à jour pour refléter les nouvelles normes Web (HTML5).

Ce:

<a tabindex="0">This represents a placeholder hyperlink</a>

... est valide HTML5. L'attribut tabindex rend le focus clavier facile à utiliser, comme les hyperliens normaux. Vous pourriez aussi bien utiliser l'élément span comme mentionné précédemment, mais l'utilisation de l'élément a est plus élégante.

Voir: http://dev.w3.org/html5/markup/a.html
et: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-href

12
aross

Voici les trois manières pour la propriété de la balise href de la balise <a> de se référer à rien:

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

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>
12
Milan Gajjar

Je sais que c'est une vieille question, mais je pensais ajouter mes deux centimes de toute façon:

Cela dépend de ce que le lien va faire, mais d'habitude, je le ferais pointer vers une URL qui pourrait éventuellement afficher/faire la même chose, par exemple, si vous faites un petit point à propos de la boîte de dialogue contextuelle:

<a id="about" href="/about">About</a>

Puis avec jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

Ainsi, très anciens navigateurs (ou les navigateurs avec JavaScript désactivé) peuvent toujours naviguer vers une page de sujet distincte, mais plus important encore, Google l'utilisera également et analysera le contenu de la page de sujet.

4
Connell

Assurez-vous que tous vos liens que vous souhaitez arrêter ont href="#!" (ou tout ce que vous voulez, vraiment), puis utilisez ceci:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});
4
bearfriend

Vous pouvez avoir une ancre HTML (balise a) sans attribut href. Laissez l'attribut href et il ne créera de lien vers rien:

<a>link</a>
3
tee

La seule chose qui a fonctionné pour moi a été une combinaison de ce qui précède:

D'abord le li dans le ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Puis, dans le LoadTab2_1, j'ai commuté manuellement les divs

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

En effet, la déconnexion de l'action déconnecte également l'action dans les onglets.

Vous devez également définir manuellement le style des onglets lorsque l’onglet principal change les choses.

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");
2
pat capozzi

J'ai rencontré ce problème sur un site WordPress. Les en-têtes des menus déroulants avaient toujours l'attribut href="" et le plug-in d'en-tête utilisé était uniquement autorisé pour les URL standard. La solution la plus simple consistait simplement à exécuter ce code dans le pied de page:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

Cela empêchera les ancres vierges de faire quoi que ce soit.

1
Bryant Jackson

Vous pouvez le faire par 

<a style='cursor:pointer' >Link</a>
0
Naveen Heroorkar
<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

c'était ma balise d'ancrage. donc, retourne false sur onClick = "" L'événement n'est pas utile ici . Je viens de supprimer la propriété href = "#" et cela a fonctionné pour moi comme ci-dessous

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

et j'avais besoin d'ajouter ce css.

.SomeClass
{
    cursor: pointer;
}
0
Burk