Comment puis-je activer les classes CSS lors d'un clic à l'aide de jQuery pour gérer les éléments de menu actifs ?

Basculer les classes CSS lors d'un clic avec jQuery

Afin d'ajouter et de supprimer dynamiquement des classes CSS sur les événements de clic à l'aide de jQuery, explorons ce qui suit problème.

Le problème : Un menu se compose d'éléments de liste qui nécessitent qu'une classe spécifique devienne actif. En cliquant sur un élément, la classe doit être ajoutée uniquement à cet élément tout en la supprimant de tous les autres. Initialement, le "about-link" devrait avoir la classe "current" par défaut.

La solution :

Pour résoudre ce problème, nous pouvons utiliser le jQuery suivant code :

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

Dans ce code :

• $('#menu li a') sélectionne tout éléments dans
• éléments qui sont les descendants de l'élément avec l'ID "menu".
• .on('click', function()) enregistre un écouteur d'événement de clic pour ces éléments.
• À l'intérieur du gestionnaire d'événements , .removeClass('current') supprime la classe "current" de l'élément actuellement actif.
• .addClass('current') ajoute la classe "current" à l'élément cliqué element.

En suivant cette approche, le "about-link" se verra initialement attribuer la classe "current" en utilisant $('#about-link').addClass('current') ;. Lorsque vous cliquez sur un autre élément du menu, la classe « actuelle » est supprimée de l'élément précédemment actif et ajoutée à l'élément cliqué, garantissant qu'un seul élément reste actif à tout moment.

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!