Come fare in modo che un tag anchor non faccia riferimento a nulla?

Uso jQuery, devo fare in modo che alcuni tag di ancoraggio non eseguano alcuna azione.

Di solito lo scrivo in questo modo:

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

Tuttavia, questo si riferisce alla parte superiore della pagina!

Se non vuoi che punti qualcosa, probabilmente non dovresti usare il <a> tag (anchor).

Se vuoi che qualcosa appaia come un link ma non si comporti come un link, è meglio usare l'elemento appropriato (come <span>) e quindi modellarlo usando CSS:

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

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

Inoltre, dato che hai taggato questa domanda "jQuery", presumo che tu voglia allegare un hander di evento click. In tal caso, fai semplicemente la stessa cosa sopra e usa qualcosa come il seguente JavaScript:

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

Ci sono alcune soluzioni tutt'altro che perfette:

1. Collegamento a un ancoraggio falso

<a href="#">

Problema: facendo clic sul collegamento si torna alla parte superiore della pagina

2. Utilizzo di un tag diverso da "a"

Utilizzare un tag span e utilizzare jquery per gestire il clic

Problema: interrompe la navigazione della tastiera, è necessario modificare manualmente il cursore al passaggio del mouse

3. Collegamento a una funzione vuota javascript

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

Problema: si interrompe durante il collegamento di immagini in Internet Explorer

Soluzione

Poiché tutti questi hanno i loro problemi, la soluzione su cui ho optato è il collegamento a un ancoraggio falso e quindi restituire falso dal metodo onClick:

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

Non è la soluzione più concisa, ma risolve tutti i problemi con i metodi di cui sopra.

Per fare in modo che non faccia nulla, usa questo:

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

Il modo corretto di gestirlo è "interrompere" il collegamento con jQuery quando si gestisce il collegamento

HTML

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

JS

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

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

Queste ultime due chiamate interrompono il browser interpretando il clic.

Ci sono molti modi per farlo come

Non aggiungere e hrefattribuire

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

Puoi aggiungere l'evento onclick invece di href like

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

Oppure puoi aggiungere una funzione nulla come questa, che sarebbe il modo migliore

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

Cosa intendi con niente?

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

o

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

Penso che tu possa provare

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

L'unico problema che vedo qui è che la sicurezza del browser di alto livello potrebbe richiedere l'esecuzione di JavaScript.

Anche se questo è uno dei modi più semplici di

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

questo dovrebbe essere usato con parsimonia

Leggi questo articolo per alcuni suggerimenti https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Questa risposta dovrebbe essere aggiornata per riflettere i nuovi standard web (HTML5).

Questo:

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

... è HTML5 valido. L'attributo tabindex lo rende focalizzabile sulla tastiera come normali collegamenti ipertestuali. Potresti anche usare l' spanelemento per questo come menzionato in precedenza, ma trovo che usando ila elemento sia più elegante.

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

Ecco i tre modi in cui <a>la hrefproprietà tag del tag non fa riferimento a nulla:

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

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

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

So che questa è una vecchia domanda, ma ho pensato di aggiungere comunque i miei due centesimi:

Dipende da cosa farà il collegamento, ma di solito, vorrei puntare il collegamento a un URL che potrebbe essere la visualizzazione / fare la stessa cosa, ad esempio, se stai facendo un po 'di pop-up box:

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

Quindi con jQuery

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

In questo modo, i browser molto vecchi (o i browser con JavaScript disabilitato) possono ancora navigare su una pagina separata, ma, cosa ancora più importante, Google lo prenderà e scansionerà i contenuti della pagina informazioni.

Assicurati che tutti i link che vuoi interrompere abbiano href="#!"(o qualsiasi cosa tu voglia, davvero), quindi usa questo:

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

Puoi avere un ancoraggio HTML ( atag) senza un hrefattributo. Lascia fuori l' hrefattributo e non si collegherà a nulla:

<a>link</a>

L'unica cosa che ha funzionato per me è stata una combinazione di quanto sopra:

Prima il li nell'ul

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

Quindi in LoadTab2_1 ho cambiato manualmente le div della scheda

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

Questo perché la disconnessione dell'elemento disconnette anche l'azione nelle schede

È inoltre necessario eseguire manualmente lo stile della scheda quando la scheda principale cambia le cose

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

Puoi farlo da

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

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

questo era il mio tag di ancoraggio. quindi restituire false su onClick = "" l'evento non è utile qui. Ho appena rimosso la proprietà href = "#" e ha funzionato per me proprio come sotto

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

e ho dovuto aggiungere questo css.

.SomeClass
{
    cursor: pointer;
}

Ho riscontrato questo problema su un sito WordPress. Le intestazioni nei menu a discesa avevano sempre l'attributo href=""e il plug-in di intestazione utilizzato consentiva solo gli URL standard. La soluzione più semplice c'era solo per eseguire questo codice nel piè di pagina:

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

Ciò impedirà alle ancore in bianco di fare qualsiasi cosa.

React non supporta più l'utilizzo di una funzione come questa href="javascript:void(0)"nel tag di ancoraggio, ma qui c'è qualcosa che funziona abbastanza bene.

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

So che questo è etichettato come una domanda jQuery, ma puoi rispondere anche con AngularJS.

nel tuo elemento, aggiungi la direttiva ng-click e usa la variabile $ event che è l'evento click ... impedisci il suo comportamento predefinito:

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

Puoi anche passare la variabile $ event in una funzione:

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

in quella funzione, fai quello che vuoi con l'evento click.