Come mantenere lo stile CSS attivo dopo aver fatto clic su un pulsante

In CSS, la Classe pseudo specifica lo stato specifico degli elementi selezionati. Con l'aiuto di queste classi, vengono aggiunte diverse proprietà di stile per modellare la parte specifica degli elementi. Tuttavia, JQuery è una libreria JavaScript specifica che fornisce metodi che aiutano con le funzionalità CSS, come mantenere attivo il pulsante dopo aver fatto clic su di esso.

Questo articolo discuterà:

• Cosa è: attivo in CSS?
• Come mantenere CSS: stile attivo dopo aver fatto clic su un pulsante?

Prerequisito: crea un file HTML

In HTML, aggiungi tre ""Elementi e assegnare a ciascuno il"btn" E "nav-btn" classi:

Casa
Chi siamo
Contattaci

Produzione

Ora, facciamo riferimento all'argomento principale del nostro post.

Cosa è: attivo in CSS?

IL ":attivo"Pseudo-Classe indica l'elemento che si trova in uno stato attivo. In CSS, questa classe è specificata con gli elementi da disegnare come attivi, come pulsanti, collegamenti o più.

Classe "Nav-Btn" di stile

IL ".NAV-BTN: attivo"Viene utilizzato per accedere alla classe"nav-btn". Questa classe è impostata con il ":attivo"Pseudo-Classe e applicato le seguenti proprietà per mostrare lo stato attivo del pulsante quando viene fatto clic dall'utente:

.nav-btn: attivo
Background-color: Blueviolet;
Colore: Whitesmoke;
Font-weight: audace;

Qui:

• "colore di sfondo"Cambia il colore di sfondo dell'elemento.
• "colore"Specifica il colore del carattere.
• "Font-peso"Definisce lo spessore del carattere.

Produzione

L'output di cui sopra verifica che lo styling dei pulsanti cambia quando viene fatto clic dagli utenti. Tuttavia, non stanno mantenendo il loro stato attivo e si sbiadiscono dopo il clic.

Come mantenere CSS: stile attivo dopo aver fatto clic su un pulsante?

JQuery può essere utilizzato per mantenere lo stato attivo dei pulsanti. A tale scopo, aggiungi gli stili all'interno della classe "nav-btn"E aggiungi la classe".attivo" con esso:

.nav-btn.attivo
Background-color: Blueviolet;
Colore: Whitesmoke;
Font-weight: audace;

Codice jQuery

Nel ""Tag Aggiungi il seguente codice:

$ (".nav-btn ").on ("click", function ()
$ (".nav-btn ").removeClass ("attivo");
$ (questo).addClass ("attivo");
);

Ecco la descrizione del codice sopra:

• IL "$ ()"È la funzione di scelta rapida di"getelementbyid".
• IL ".nav-btn"La classe è accessibile tramite questa funzione.
• IL ".ON (click, function ()"Indica la funzione che verrà attivata sul clic del pulsante.
• IL "$ (".nav-btn ").rimoveclass ("attivo");"Rimuovere gli stili da ciascun pulsante e implementare gli stili quando si fa clic sul pulsante.
• "$ (questo).addClass ("attivo");"Significa che gli stili devono essere applicati solo a quel pulsante che viene attualmente cliccato.

Produzione

Questo è tutto! Hai imparato con successo a mantenere CSS ":attivo"Stile dopo un pulsante Click.

Conclusione

Per mantenere lo stato attivo di un pulsante, vengono utilizzati metodi jQuery. A tale scopo, prima, accedi al pulsante utilizzando "$ ()" metodo. Quindi, definire la funzione per applicare gli stili di stato attivo sul clic del mouse. Implementa il gestore di eventi e la funzione. La funzione rimuoverà prima gli stili da ciascun pulsante. Poi, "$ (questo)"È usato con il": addClass ()"Per mantenere lo stato attivo del pulsante. Questo articolo ha dimostrato la procedura per mantenere CSS: stile attivo dopo aver fatto clic su un pulsante.