Heim > Web-Frontend > CSS-Tutorial > Wie verwende ich jQuery zum Hinzufügen und Entfernen von CSS-Klassen per Klick?

Wie verwende ich jQuery zum Hinzufügen und Entfernen von CSS-Klassen per Klick?

Linda Hamilton
Freigeben: 2024-11-26 03:47:11
Original
393 Leute haben es durchsucht

How to Use jQuery to Add and Remove CSS Classes on Click?

Wie füge ich mit jQuery Klassen beim Klicken hinzu und entferne sie?

In jQuery können Sie CSS-Klassen für Elemente mit addClass( ), RemoveClass() und toggleClass() Methoden. Dies kann nützlich sein, um dynamisches Verhalten zu implementieren, wie etwa das Hinzufügen oder Entfernen aktiver Zustände oder das Hervorheben von Menüelementen.

Beispiel: Hinzufügen und Entfernen einer Klasse per Klick

Angenommen, Sie habe ein Menü mit

  • Elemente. Sie möchten dem angeklickten Element eine „aktuelle“ Klasse hinzufügen und diese gleichzeitig von allen anderen Elementen entfernen. Dadurch wird sichergestellt, dass jeweils nur ein Element die „aktuelle“ Klasse hat.

    Hier ist eine jQuery-Lösung:

    $('#menu li').on('click', function() {
        $(this).addClass('current').siblings().removeClass('current');
    });
    Nach dem Login kopieren

    Dieser Code verwendet die Ereignisdelegation, um einen Click-Handler an alle <-Elemente anzuhängen. li> Elemente innerhalb des Containers mit der ID „menu“. Wenn auf ein Element geklickt wird, fügt es sich selbst die „aktuelle“ Klasse hinzu und entfernt dieselbe Klasse von allen seinen Geschwistern mit der Methode siblings().

    Zusätzliche Überlegung: Initialisieren der „aktuellen“ Klasse

    Zunächst möchten Sie die „aktuelle“ Klasse in einem der Menüpunkte festlegen. Sie können dies tun, indem Sie Folgendes verwenden:

    $('#about-link').addClass('current');
    Nach dem Login kopieren

    Dadurch wird die „aktuelle“ Klasse zum Element mit der ID „about-link“ hinzugefügt, um sicherzustellen, dass es als aktives Element beginnt.

    Verbesserte Lösung

    Hier ist eine verbesserte Lösung, die das vereinfacht Code:

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

    Dies funktioniert ähnlich wie der vorherige Code, zielt jedoch auf das Elemente innerhalb von

  • Artikel. Standardmäßig ist
  • Elemente haben keine href-Attribute, daher wird das Klickereignis nicht direkt auf ihnen ausgelöst.

    Das obige ist der detaillierte Inhalt vonWie verwende ich jQuery zum Hinzufügen und Entfernen von CSS-Klassen per Klick?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

  • Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage