Wir verwenden häufig Javascript, um den Stil von Seitenelementen zu ändern. Eine Möglichkeit besteht darin, die CSS-Klasse (Class) des Seitenelements zu ändern. In herkömmlichem Javascript verwenden wir dazu normalerweise drei Methoden, um diese Funktion zu erreichen traditionelle Methode, aber sie spart viel Code. Immer noch derselbe Satz – „jQuery macht JavaScript-Code prägnant!“
1. CSS-Klasse hinzufügen
$("#target").addClass("newClass"); /#target bezieht sich auf die ID des Elements, das gestylt werden muss
//newClass bezieht sich auf den Namen der CSS-Klasse
2. RemoveClass() – entfernt die CSS-Klasse
$("#target " ).removeClass("oldClass");
//#target bezieht sich auf die ID des Elements, dessen CSS-Klasse entfernt werden muss
//oldClass bezieht sich auf den Namen der CSS-Klasse
3. toggleClass() – Eine CSS-Klasse hinzufügen oder entfernen: Wenn die CSS-Klasse bereits vorhanden ist, wird sie entfernt; wenn die CSS-Klasse nicht vorhanden ist, wird sie hinzugefügt.
$("#target").toggleClass("newClass")
//Wenn für das Element mit der ID „target“ ein CSS-Stil definiert ist, wird dieser entfernt
//Im Gegenteil, CSS Der Klasse „newClass“ wird diese ID zugewiesen.
In tatsächlichen Anwendungen definieren wir häufig zuerst diese CSS-Klassen und ändern dann den Seitenelementstil durch Auslösen von Javascript-Ereignissen (z. B. durch Klicken auf einen Link). Darüber hinaus stellt jQuery auch eine Methode hasClass("className") bereit, um festzustellen, ob einem Element eine CSS-Klasse zugewiesen wurde.
Unten finden Sie ein vollständiges Beispiel.
