Wie kann ein Ankertag auf nichts verweisen?

Ich benutze jQuery, ich muss dafür sorgen, dass einige Ankertags keine Aktion ausführen.

Normalerweise schreibe ich es so:

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

Dies bezieht sich jedoch auf den oberen Rand der Seite!

Wenn Sie nicht möchten, dass es auf irgendetwas verweist, sollten Sie wahrscheinlich nicht das <a>(Anker-) Tag verwenden.

Wenn Sie möchten, dass etwas wie ein Link aussieht, sich aber nicht wie ein Link verhält, verwenden Sie am besten das entsprechende Element (z. B. <span>) und formatieren Sie es dann mit CSS:

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

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

Da Sie diese Frage mit "jQuery" markiert haben, gehe ich davon aus, dass Sie einen Klickereignishander anhängen möchten. Wenn ja, machen Sie einfach dasselbe wie oben und verwenden Sie dann etwas wie das folgende JavaScript:

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

Es gibt einige weniger als perfekte Lösungen:

1. Link zu einem falschen Anker

<a href="#">

Problem: Durch Klicken auf den Link wird wieder an den Anfang der Seite gesprungen

2. Verwenden eines anderen Tags als 'a'

Verwenden Sie ein span-Tag und die jquery, um den Klick zu verarbeiten

Problem: Bricht die Tastaturnavigation ab, muss den Hover-Cursor manuell ändern

3. Link zu einer Javascript-Void-Funktion

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

Problem: Unterbrechungen beim Verknüpfen von Bildern im IE

Lösung

Da diese alle ihre Probleme haben, besteht die Lösung, die ich beschlossen habe, darin, eine Verknüpfung zu einem gefälschten Anker herzustellen und dann von der onClick-Methode false zurückzugeben:

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

Nicht die prägnanteste Lösung, aber sie löst alle Probleme mit den oben genannten Methoden.

Verwenden Sie Folgendes, damit es überhaupt nichts tut:

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

Der richtige Weg, dies zu handhaben, besteht darin, den Link mit jQuery zu "unterbrechen", wenn Sie den Link behandeln

HTML

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

JS

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

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

Diese letzten beiden Aufrufe stoppen den Browser, der den Klick interpretiert.

Es gibt so viele Möglichkeiten, es so zu machen

Nicht hinzufügen und hrefzuordnen

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

Sie können onclick event anstelle von href like hinzufügen

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

Oder Sie können eine leere Funktion wie diese hinzufügen, was der beste Weg wäre

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

Was meinst du mit nichts?

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

oder

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

Ich denke du kannst es versuchen

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

Der einzige Haken, den ich hier sehe, ist die hohe Browsersicherheit, die möglicherweise zur Ausführung von Javascript führt.

Dies ist jedoch einer der einfacheren Wege als

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

Dies sollte sparsam verwendet werden

Lesen Sie diesen Artikel für einige Hinweise https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Diese Antwort sollte aktualisiert werden, um neuen Webstandards (HTML5) Rechnung zu tragen.

Dies:

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

... ist gültiges HTML5. Das tabindex-Attribut macht die Tastatur wie normale Hyperlinks fokussierbar. Sie können das spanElement auch wie oben erwähnt verwenden, aber ich finde die Verwendung des aElements eleganter.

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

Hier sind die drei Möglichkeiten, wie sich <a>die hrefTag-Eigenschaft des Tags auf nichts bezieht:

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

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

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

Ich weiß, dass dies eine alte Frage ist, aber ich dachte, ich würde trotzdem meine zwei Cent hinzufügen:

Es hängt davon ab, was der Link tun wird, aber normalerweise würde ich den Link auf eine URL verweisen, die möglicherweise dasselbe anzeigt / tut, zum Beispiel, wenn Sie ein wenig über Box-Popup machen:

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

Dann mit jQuery

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

Auf diese Weise können sehr alte Browser (oder Browser mit deaktiviertem JavaScript) weiterhin zu einer separaten Info-Seite navigieren. Noch wichtiger ist jedoch, dass Google diese aufnimmt und den Inhalt der Info-Seite crawlt.

Stellen Sie sicher, dass alle Ihre Links, die Sie beenden möchten, vorhanden sind href="#!"(oder wirklich alles, was Sie möchten), und verwenden Sie dann Folgendes:

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

Sie können einen HTML-Anker ( aTag) ohne hrefAttribut haben. Lassen Sie das hrefAttribut weg und es wird nichts verknüpft:

<a>link</a>

Das einzige, was für mich funktioniert hat, war eine Kombination der oben genannten:

Zuerst das li in der ul

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

Dann habe ich im LoadTab2_1 die Tab-Divs manuell gewechselt

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

Dies liegt daran, dass durch das Trennen der auch die Aktion in den Registerkarten getrennt wird

Sie müssen das Tab-Styling auch manuell durchführen, wenn die primäre Registerkarte Änderungen vornimmt

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

Sie können es tun, indem Sie

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

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

Das war mein Ankertag. Geben Sie also false zurück, wenn das Ereignis onClick = "" hier nicht hilfreich ist. Ich habe gerade die Eigenschaft href = "#" entfernt und es hat bei mir genauso funktioniert wie unten

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

und ich musste dieses CSS hinzufügen.

.SomeClass
{
    cursor: pointer;
}

Ich bin auf einer WordPress-Site auf dieses Problem gestoßen. Die Header in Dropdown-Menüs hatten immer das Attribut href=""und das verwendete Header-Plugin erlaubte nur Standard-URLs. Die einfachste Lösung bestand darin, diesen Code in der Fußzeile auszuführen:

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

Dies verhindert, dass leere Anker etwas tun.

Reagieren Sie nicht mehr mit einer Funktion wie dieser href="javascript:void(0)"in Ihrem Ankertag, aber hier ist etwas, das ziemlich gut funktioniert.

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

Ich weiß, dass dies als jQuery-Frage markiert ist, aber Sie können dies auch mit AngularJS beantworten.

Fügen Sie in Ihrem Element die Anweisung ng-click hinzu und verwenden Sie die Variable $ event, die das Klickereignis ist. Verhindern Sie das Standardverhalten:

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

Sie können die Variable $ event sogar an eine Funktion übergeben:

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

In dieser Funktion machen Sie mit dem Klickereignis, was Sie wollen.