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

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