Comment faire en sorte qu'une balise d'ancrage ne renvoie à rien?

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

Je l'écris généralement comme ceci:

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

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

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

Si vous voulez que quelque chose ressemble à un lien mais n'agisse pas comme un lien, il est préférable d'utiliser l'élément approprié (tel que <span>), puis de le styliser en utilisant 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 tagué cette question "jQuery", je suppose que vous souhaitez attacher un hander d'événement de clic. Si tel est le cas, faites la même chose que ci-dessus, puis utilisez quelque chose comme le JavaScript suivant:

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

Il existe quelques solutions moins que parfaites:

1. Lien vers une fausse ancre

<a href="#">

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

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

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

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

3. Lien vers une fonction javascript void

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

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

Solution

Comme ils ont tous leurs problèmes, la solution sur laquelle j'ai choisi est de créer un lien vers une fausse ancre, puis de renvoyer false à partir de la méthode onClick:

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

Ce n'est pas la solution la plus concise, mais elle résout tous les problèmes avec les méthodes ci-dessus.

Pour ne rien faire du tout, utilisez ceci:

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

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 arrêtent le navigateur d'interpréter le clic.

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

Ne pas ajouter et hrefattribuer

<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 void comme celle-ci, ce qui serait le meilleur moyen

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

Que voulez-vous dire par rien?

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

ou

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

Je pense que tu peux essayer

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

Le seul hic que je vois ici est que la sécurité du navigateur de haut niveau peut inciter à exécuter javascript.

Bien que ce soit l'un des moyens les plus simples

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

cela doit être utilisé avec parcimonie

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

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

Ce:

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

... est du HTML5 valide. L'attribut tabindex le rend focusable au clavier comme les hyperliens normaux. Vous pourriez aussi bien utiliser l' spanélément pour cela comme mentionné précédemment, mais je trouve que l'utilisation de l' aélément est plus élégante.

Voir: https://w3c.github.io/html-reference/a.html
et: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Voici les trois façons dont <a>la hrefpropriété tag de la balise ne renvoie à rien:

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

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

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

Je sais que c'est une vieille question, mais je pensais quand même ajouter mes deux cents:

Cela dépend de ce que le lien va faire, mais en général, je pointerais le lien vers une URL qui pourrait éventuellement afficher / faire la même chose, par exemple, si vous faites un petit message sur la boîte:

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

Puis avec jQuery

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

De cette façon, les très anciens navigateurs (ou les navigateurs avec JavaScript désactivé) peuvent toujours naviguer vers une page à propos distincte, mais plus important encore, Google la récupérera également et explorera le contenu de la page à propos.

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();
});

Vous pouvez avoir une ancre HTML ( abalise) sans hrefattribut. Laissez l' hrefattribut et il ne sera lié à rien:

<a>link</a>

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

D'abord le li dans l'ul

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

Ensuite, dans le LoadTab2_1, j'ai changé manuellement les onglets divs

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

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

Vous devez également faire manuellement le style de l'onglet 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");

Vous pouvez le faire en

<a style='cursor:pointer' >Link</a>

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

c'était ma balise d'ancrage. donc renvoyer false sur l'événement onClick = "" 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;
}

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 plugin d'en-tête utilisé uniquement les URL standard autorisées. La solution la plus simple était juste d'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.

React ne prend plus en charge l'utilisation d'une fonction comme celle-ci href="javascript:void(0)"dans votre balise d'ancrage, mais voici quelque chose qui fonctionne plutôt bien.

<a href="#" onClick={() => null} >link</a>

Je sais que cela est étiqueté comme une question jQuery, mais vous pouvez également y répondre avec AngularJS.

dans votre élément, ajoutez la directive ng-click et utilisez la variable $ event qui est l'événement click ... évitez son comportement par défaut:

<a href="#" ng-click="$event.preventDefault()">

Vous pouvez même passer la variable $ event dans une fonction:

<a href="#" ng-click="doSomething($event)">

dans cette fonction, vous faites ce que vous voulez avec l'événement click.