Wie kann ich CSS-Klassen beim Klicken mit jQuery umschalten, um aktive Menüelemente zu verwalten?

CSS-Klassen bei Klick mit jQuery umschalten

Um CSS-Klassen bei Klickereignissen mit jQuery dynamisch hinzuzufügen und zu entfernen, sehen wir uns Folgendes an Problem.

Das Problem: Ein Menü besteht aus Listenelementen, die eine bestimmte Klasse erfordern aktiv. Beim Klicken auf ein Element sollte die Klasse nur diesem Element hinzugefügt und von allen anderen entfernt werden. Zunächst sollte der „about-link“ standardmäßig die Klasse „current“ haben.

Die Lösung:

Um dieses Problem zu beheben, können wir die folgende jQuery verwenden Code:

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

In diesem Code:

• $('#menu li a') wählt alle aus Elemente innerhalb von
• Elemente, die Nachkommen des Elements mit der ID „menu“ sind.
• .on('click', function()) registriert einen Click-Event-Listener für diese Elemente.
• Im Event-Handler , .removeClass('current') entfernt die „aktuelle“ Klasse aus dem aktuell aktiven Element.
• .addClass('current') fügt die „aktuelle“ Klasse dem hinzu angeklicktes Element.

Wenn Sie diesem Ansatz folgen, wird dem „about-link“ zunächst die „aktuelle“ Klasse zugewiesen, indem $('#about-link').addClass('current' );. Wenn auf ein anderes Element im Menü geklickt wird, wird die „aktuelle“ Klasse aus dem zuvor aktiven Element entfernt und dem angeklickten Element hinzugefügt, sodass immer nur ein Element aktiv bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Klassen beim Klicken mit jQuery umschalten, um aktive Menüelemente zu verwalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!