So halten Sie den aktiven CSS -Stil nach Klicken auf eine Schaltfläche

In CSS gibt die Pseudoklasse den spezifischen Zustand der ausgewählten Elemente an. Mit Hilfe dieser Klassen werden mehrere Styling -Eigenschaften hinzugefügt, um den spezifischen Teil der Elemente zu stylen. JQuery ist jedoch eine spezifische JavaScript -Bibliothek, die Methoden bereitstellt, die bei CSS -Funktionen helfen, z. B. die Schaltfläche aktiv zu halten, nachdem Sie darauf geklickt haben.

In dieser Beschreibung wird erörtert:

• Was ist: aktiv in CSS?
• So halten Sie CSS: Aktiver Stil nach Klicken auf eine Schaltfläche Klicken?

Voraussetzung: Erstellen Sie eine HTML -Datei

In HTML drei hinzufügen “Elemente und zuweisen jeweils die “Btn" Und "nav-btn" Klassen:

Heim
Über uns
Kontaktiere uns

Ausgang

Lassen Sie uns nun auf das Hauptthema unseres Beitrags beziehen.

Was ist: aktiv in CSS?

Der ":aktivDie Pseudoklasse gibt das Element an, das sich in einem aktiven Zustand befindet. In CSS wird diese Klasse mit den Elementen spezifiziert, die als aktiv bezeichnet werden, wie z. B. Schaltflächen, Links oder mehr.

Stil „Nav-BTN“ -Klasse

Der ".Nav-Btn: Aktiv"Wird verwendet, um auf die Klasse zuzugreifen"nav-btn”. Diese Klasse wird mit dem "festgelegt":aktivPseudoklasse und die folgenden Eigenschaften angewendet, um den aktiven Status der Schaltfläche anzuzeigen, wenn er vom Benutzer klickt:

.nav-btn: aktiv
Hintergrundfarbe: Blueviolet;
Farbe: Whitesmoke;
Schriftdicke: fett;

Hier:

• “Hintergrundfarbe”Ändert die Hintergrundfarbe des Elements.
• “FarbeGibt die Schriftfarbe an.
• “Schriftgewicht”Definiert die Dicke der Schriftart.

Ausgang

Die obige Ausgabe überprüft, dass sich das Styling der Schaltflächen ändert, wenn sie von den Benutzern angeklickt werden. Sie halten ihren aktiven Zustand jedoch nicht und verblassen nach dem Klick nicht.

So halten Sie CSS: Aktiver Stil nach Klicken auf eine Schaltfläche?

JQuery kann verwendet werden, um den aktiven Status der Tasten zu halten. Zu diesem Zweck fügen Sie die Stile in der Klasse hinzunav-btn"Und fügen Sie die Klasse an".aktiv" damit:

.nav-btn.aktiv
Hintergrundfarbe: Blueviolet;
Farbe: Whitesmoke;
Schriftdicke: fett;

JQuery Code

Im "”Tag Fügen Sie den folgenden Code hinzu:

$ (".nav-btn ").auf ("klicken", function ()
$ (".nav-btn ").removeclass ("aktiv");
$ (this).AddClass ("aktiv");
);

Hier ist die Beschreibung des obigen Code:

• Der "$ ()Ist die Verknüpfungsfunktion der “GetelementById”.
• Der ".nav-btnIst die Klasse, die über diese Funktion zugegriffen wird.
• Der ".auf (klicken, function ()”Bezeichnet die Funktion, die auf der Schaltfläche Klick ausgelöst wird.
• Der "$ (“.nav-btn ”).removeclass ("aktiv");Entfernen Sie die Stile von jeder Schaltfläche und implementieren Sie die Stile, wenn die Schaltfläche klickt.
• “$ (this).AddClass ("aktiv");”Bedeutet, dass die Stile nur auf diese Schaltfläche angewendet werden dürfen, auf die derzeit geklickt wird.

Ausgang

Das ist es! Sie haben erfolgreich gelernt, wie man CSS aufrechterhält. “:aktiv”Stil nach einer Schaltfläche Klicken Sie auf.

Abschluss

Um den aktiven Status einer Taste zu behalten, werden JQuery -Methoden verwendet. Zu diesem Zweck greifen Sie zunächst die Schaltfläche mit der “zu"$ ()" Methode. Definieren Sie dann die Funktion, um die aktiven Zustandsstile auf Mausklick anzuwenden. Implementieren Sie den Event -Handler und die Funktion. Die Funktion entfernen zuerst die Stile von jeder Taste. Dann, "$ (this)"Wird mit dem" verwendet ": AddClass ()”Um den aktiven Status der Taste zu behalten. Dieser Artikel hat das Verfahren zum Aufbewahren von CSS: Active -Stil nach dem Klicken auf eine Schaltfläche gezeigt.