Wie kann ich einen leeren HTML-Anker, so dass die Seite nicht „aufspringen“, wenn ich es anklicke?

StackOverflow https://stackoverflow.com/questions/493175

  •  20-08-2019
  •  | 
  •  

Frage

Ich arbeite an einigen JQuery einige Inhalte zu verbergen / zeigen, wenn ich auf einen Link klicken. Ich kann so etwas wie erstellen: 

<a href="#" onclick="jquery_stuff" />

Aber wenn ich auf diesen Link klicken, während ich auf einer Seite nach unten gescrollt, wird es bis zum Anfang der Seite springen zurück.

Wenn ich so etwas wie: 

<a href="" onclick="jquery_stuff" />

Die Seite wird neu geladen, was die Seite aller Änderungen entledigt, die Javascript gemacht hat.

So etwas wie folgt aus: 

<a onclick="jquery_stuff" />

gibt mir die gewünschte Wirkung, aber es zeigt nicht mehr als Link oben. Gibt es eine Möglichkeit einen leeren Anker geben, damit ich einen Javascript-Handler zum onclick Ereignisse zuordnen kann, ohne auf der Seite oder Bewegen die Scrollbar etwas zu ändern?

War es hilfreich?

Lösung

Setzen Sie ein "return false;" auf die zweite Option: 

<a href="" onclick="jquery_stuff; return false;" />

Andere Tipps

Sie müssen nach dem return false; jquery_stuff: 

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

Dies wird die Standard-Aktion abzubrechen.

Sie können einfach auszudrücken, wie wie folgt: 

<a href="javascript:;" onclick="jquery_stuff">

jQuery hat eine Funktion für dieses genannt preventDefault eingebaut, die hier gefunden werden kann: http://api.jquery.com/event.preventDefault/

Hier ist ihr Beispiel: 

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

Sie können auch den Link wie folgt aufbauen: 

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

Überprüfen Sie eyelidlessness' Kommentar (eine Schaltfläche, nicht ein Anker). War gerade dabei, den gleichen Rat zu posten. Ein Anker, der auf eine Ressource verknüpft nicht und lediglich führt ein Skript sollte als Schaltfläche implementiert werden.

  

Stoppen Sie Ihre Event-Handler in HTML setzen und stoppen Anker-Tags   dass dienen nicht semantische Zwecke zu verankern. Verwenden Sie eine Taste und fügen Sie die   Klicken Handler in Ihrem Javascript. Beispiel: HTML und JavaScript <button id="jquery_stuff">Label</button>   $('#jquery_stuff').click(jquery_stuff);. CSS können Sie die zum ursprünglichen Stil   Knopf wie ein Link zu sehen, durch Klotzen, Bordüren, margin Entfernen und   Hintergrund-Farbe, dann geben Sie Ihre Link-Styles (zB. Farbe und   text-decoration). - eyelidlessness 19. Oktober '10 um 17:40 Uhr 

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

href erfordert es etwas, wenn man es will nicht, um Pop-up-Fehler in Validatoren für html. Die javascript:; ist ein guter Halter.

Wenn Sie wirklich wollen die # verwenden: 

<a href="#me" name="me" onclick="jquery">link</a>

Seien Sie vorsichtig mit dem return false;, hält es Standardverhalten von was auch immer Sie tun.

Auch wenn Ihr js wie a einreichen Sie Probleme im Internet Explorer ausgeführt werden können. 

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

Normalerweise verwende ich einen <span> und Stil wie ein Link aussehen, wenn ich so etwas wie dies erreichen muß. 

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

etc ..

JQUERY: 

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness war ein bisschen douchy in der Art, wie er es sagte, aber er hatte Recht. Dies ist der sauberste Weg, es zu tun. Warum verwendet jQuery wenn du werde dann Vanille Javascript gehen zurück für Sachen jQuery funktioniert einfacher und saubere?

Normalerweise tue ich: 

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

Wie wäre es damit: 

<a href="#nogo" onclick="foo();">some text</a>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top