Einen Link zum Neuladen der Seite verhindern

Ich erstelle ein responsives Menü: Codepen-Demo

Um zu vermeiden, dass die Seite neu geladen wird, wenn ich auf einen Link klicke, habe ich:

$('nav.menu a[href="#"]').click(function () {
  $(this).preventDefault();
});

Aber das scheint nicht zu funktionieren. Wenn ich auf eine Schaltfläche klicke, verschwindet das Menü.

Weiß jemand was ich falsch mache?

$('nav.menu a').click(function (event) {
  event.preventDefault();
  // or use return false;
});

• MDN: event.preventDefault()
• jQuery: Selektoren

Es gibt einen CSS-Weg mit Zeigerereignisse.

Also durch die Verwendung im CSS pointer-events: none; Alle Klicks werden ignoriert. Dies ist eine “aktuelle” Alternative und wird in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+ unterstützt.

Beispiel

Hier ist eine sehr einfache Möglichkeit, dies in HTML zu tun.

<a class="font-weight-bold" href="https://stackoverflow.com/questions/18575623/javascript:void(0);"> Click Here </a>

Geben Sie einfach falsch zurück.

$('nav.menu a[href="#"]').click(function () {
  return false
});

Verwenden Sie so:

$('nav.menu a[href="#"]').click(function (event) {
  event.preventDefault();
});

$('nav.menu a[href="#"]').click(function (e) {
   e.preventDefault();
});

Versuche dies:

$('.menu a').click(function(e){
   e.preventDefault(); // stop the normal href from reloading the page.
});

Beispiel für einen funktionierenden Codepen: http://codepen.io/anon/pen/cynEg

Sie hatten keinen Verweis auf die enthaltene jquery-Bibliothek. Auch die ‘enquire’-Funktion gibt jetzt einen Fehler aus, aber preventDefault funktioniert.

Bearbeiten Die zweite Funktion habe ich auskommentiert.

Und eine Inline-Option ohne jQuery:

<a href="https://stackoverflow.com/questions/18575623/javascript:function%20f(e){e.preventDefault();}">Link</a>

Und vergessen Sie nicht, dass Sie damit bereits den Namen “f” für eine Funktion verwendet haben, also benennen Sie keine andere Funktion so.