Wie kann ich mit jQuerys „addClass()' und „removeClass()' jeweils nur ein Listenelement hervorheben?

Eine Klasse beim Klicken mit jQuery hinzufügen und entfernen

Beim Arbeiten mit Listenmenüelementen ist es oft wünschenswert, das aktuell aktive Element durch hervorzuheben Hinzufügen einer Klasse. Es kann jedoch zu Herausforderungen kommen, sicherzustellen, dass jeweils nur ein Element die Klasse hat.

Um dieses Problem zu beheben, verwenden Sie die Methoden addClass() und removeClass() von jQuery. Fügen Sie die Klasse zunächst zum gewünschten Startelement hinzu, z. B. „about-link“. Verwenden Sie dann einen Ereignis-Listener für das Listenelement („menu li“), um Klicks zu verarbeiten.

Verwenden Sie im Ereignis-Listener die Methode siblings(), um die Klasse aus allen anderen Listenelementelementen zu entfernen. Dadurch wird sichergestellt, dass nur das angeklickte Element die Klasse behält. Um jedoch mit dem aktiven „about-link“ zu beginnen, müssen wir eine zusätzliche Codezeile hinzufügen:

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

In diesem modifizierten Code wählen wir die „a“-Elemente innerhalb der Listenelemente aus (' menu li a'), um sicherzustellen, dass wir die Links gezielt ansprechen. Anschließend verwenden wir die aktuelle Klasse als Selektor, um sie aus allen zuvor aktiven Links zu entfernen, bevor wir sie dem angeklickten Link hinzufügen. Dadurch entfällt die Notwendigkeit, die Klasse manuell zu „about-link“ im anfänglichen JavaScript hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuerys „addClass()' und „removeClass()' jeweils nur ein Listenelement hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!