Comment garder le style CSS actif après avoir cliqué sur un bouton

Dans CSS, la pseudo-classe spécifie l'état spécifique des éléments sélectionnés. À l'aide de ces classes, plusieurs propriétés de style sont ajoutées pour style la partie spécifique des éléments. Cependant, JQuery est une bibliothèque JavaScript spécifique qui fournit des méthodes qui aident les fonctionnalités CSS, comme garder le bouton actif après avoir cliqué dessus.

Cet article discutera:

• Qu'est-ce que: actif dans CSS?
• Comment conserver CSS: style actif après avoir cliqué sur un bouton?

Préalable: créer un fichier html

Dans HTML, ajoutez trois "«Éléments et attribuez à chacun le«btn" et "nav btn" Des classes:

Maison
À propos de nous
Contactez-nous

Sortir

Maintenant, faisons référence au sujet principal de notre poste.

Qu'est-ce que: actif dans CSS?

Le ":actif»Pseudo-classe indique l'élément qui est dans un état actif. Dans CSS, cette classe est spécifiée avec les éléments à styliser comme actifs, tels que des boutons, des liens ou plus.

Classe de style «nav-btn»

Le ".NAV-BTN: actif"Est utilisé pour accéder à la classe"nav btn". Cette classe est définie avec le «:actif”Pseudo-classe et appliqué les propriétés suivantes pour afficher l'état actif du bouton lorsqu'il est cliqué par l'utilisateur:

.nav-btn: actif
Color en arrière-plan: Blueviolet;
Couleur: Whitesmoke;
Police-poids: Bold;

Ici:

• "Couleur de l'arrière plan"Modifie la couleur d'arrière-plan de l'élément.
• "couleur»Spécifie la couleur de la police.
• "poids de police»Définit l'épaisseur de la police.

Sortir

La sortie ci-dessus vérifie que le style des boutons change lorsqu'il est cliqué par les utilisateurs. Cependant, ils ne gardent pas leur état actif et ne se décolorent pas après le clic.

Comment garder CSS: style actif après avoir cliqué sur un bouton?

jQuery peut être utilisé pour garder l'état actif des boutons. À cette fin, ajoutez les styles de la classe "nav btn"Et ajoutez la classe".actif" avec ça:

.nav btn.actif
Color en arrière-plan: Blueviolet;
Couleur: Whitesmoke;
Police-poids: Bold;

code jQuery

Dans le "»Tag Ajouter le code suivant:

$ (".nav-btn ").sur ("cliquez", fonction ()
$ (".nav-btn ").RemoveClass ("actif");
$ (ceci).addClass ("actif");
);

Voici la description du code ci-dessus:

• Le "$ ()«Est la fonction de raccourci du«getElementbyid".
• Le ".nav btn"Est la classe accessible via cette fonction.
• Le ".on (cliquez, fonction ()”Désigne la fonction qui sera déclenchée sur le bouton cliquer.
• Le "$ (".nav-btn ”).Supprimer («actif»);"Supprimez les styles de chaque bouton et implémentez les styles lorsque le bouton est cliqué.
• "$ (ceci).addClass («actif»);"Signifie que les styles ne doivent être appliqués qu'à ce bouton qui est actuellement cliqué.

Sortir

C'est ça! Vous avez réussi à maintenir le CSS ":actif”Style après un bouton cliquer.

Conclusion

Pour garder l'état actif d'un bouton, des méthodes jQuery sont utilisées. À cette fin, accédez d'abord au bouton en utilisant le «$ ()" méthode. Ensuite, définissez la fonction pour appliquer les styles d'état actifs sur la souris cliquez. Implémenter le gestionnaire d'événements et la fonction. La fonction supprimera d'abord les styles de chaque bouton. Alors, "$ (ceci)"Est utilisé avec le": addClass ()«Pour garder l'état actif du bouton. Cet article a démontré la procédure pour garder CSS: style actif après avoir cliqué sur un bouton.