Comment utiliser jQuery pour ajouter et supprimer des classes CSS en un clic ?

Comment ajouter et supprimer des classes en cliquant sur jQuery ?

Dans jQuery, vous pouvez manipuler dynamiquement des classes CSS sur des éléments avec addClass( ), les méthodes removeClass() et toggleClass(). Cela peut être utile pour implémenter un comportement dynamique, tel que l'ajout ou la suppression d'états actifs ou la mise en surbrillance d'éléments de menu.

Exemple : Ajouter et supprimer une classe en cliquant sur

Supposons que vous avoir un menu avec

éléments. Vous souhaitez ajouter une classe "actuelle" à l'élément cliqué tout en le supprimant de tous les autres éléments. Cela garantit qu'un seul élément possède la classe « actuelle » à la fois.

Voici une solution jQuery :

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

Ce code utilise la délégation d'événement pour attacher un gestionnaire de clics à tous les éléments < li> éléments dans le conteneur avec l'ID "menu". Lorsqu'un élément est cliqué, il ajoute la classe « actuelle » à lui-même et supprime la même classe de tous ses frères et sœurs à l'aide de la méthode siblings().

Considération supplémentaire : initialisation de la classe « actuelle »

Au départ, vous souhaiterez définir la classe "actuelle" sur l'un des éléments du menu. Vous pouvez le faire en utilisant :

$('#about-link').addClass('current');

Cela ajoute la classe « actuelle » à l'élément avec l'ID « about-link », garantissant qu'il commence comme l'élément actif.

Solution améliorée

Voici une solution améliorée qui simplifie le code :

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

Cela fonctionne de la même manière que le code précédent mais cible le éléments dans

articles. Par défaut,

les éléments n'ont pas d'attributs href, donc l'événement click n'est pas déclenché directement sur eux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!