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

Ä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>

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');
});

Erklärung

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

1. Fügt das ' hinzu current'-Klasse zum Link des angeklickten Listenelements mit $(this).addClass('current').
2. 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!