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

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

Mary-Kate Olsen

Freigeben： 2024-11-25 05:43:17

Original

332 Leute haben es durchsucht

How Can I Toggle CSS Classes on Click Using jQuery to Manage Active Menu Items?

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

Nach dem Login kopieren

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!