Wie kann ich jQuery verwenden, um den aktiven Status von Menüelementen zu verwalten?-CSS-Tutorial-php.cn

Wie kann ich jQuery verwenden, um den aktiven Status von Menüelementen zu verwalten?

Mary-Kate Olsen

Freigeben： 2024-11-27 20:55:13

Original

761 Leute haben es durchsucht

How Can I Use jQuery to Manage the Active State of Menu Items?

Ändern des Status von Menüelementen mit jQuery

In diesem Beitrag befassen wir uns damit, wie Sie die Funktionen von jQuery zur dynamischen Klassenverwaltung nutzen können Stile für Listenelemente innerhalb eines Menüs. Das Ziel besteht darin, die „aktuelle“ Klasse durch Klicken zu einem bestimmten Listenelement hinzuzufügen und sie gleichzeitig von allen anderen Elementen zu entfernen.

Ersteinrichtung

Um die Funktionalität zu starten , müssen wir zunächst die Menüpunkte mit

definieren. Elemente und Links mithilfe von -Tags. Wir fügen einem der Listenelement-Links die Klasse „aktuell“ hinzu, um das ursprünglich ausgewählte Element anzuzeigen:

<ul>

Nach dem Login kopieren

Ereignis-Listener hinzufügen

Mit jQuery , fügen wir dem Link jedes Listenelements einen Ereignis-Listener hinzu, um den Klick zu verarbeiten Ereignis:

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

Nach dem Login kopieren

Erklärung

Im Ereignis-Listener führt das jQuery-Code-Snippet die folgenden Aufgaben aus:

Fügt das ' hinzu current'-Klasse zum Link des angeklickten Listenelements mit $(this).addClass('current').
Entfernt die Klasse „current“ aus allen anderen Listenelement-Links mithilfe von $('#menu li a.current').not(this).removeClass ('aktuell'). Diese Zeile wählt alle Links mit der „aktuellen“ Klasse aus und schließt den aktuell angeklickten aus.

Ergebnis

Als Ergebnis, wenn ein Benutzer auf einen klickt Bei einem der Menüelemente erhält der Link den Stil der „aktuellen“ Klasse, während die „aktuelle“ Klasse aus dem zuvor aktiven Element entfernt wird. Dadurch wird sichergestellt, dass jeweils nur ein Link zu einem Listenelement den aktuellen Stil aufweist.

Das obige ist der detaillierte Inhalt vonWie kann ich jQuery verwenden, um den aktiven Status von Menüelementen zu verwalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!