Comment puis-je utiliser jQuery pour basculer dynamiquement une seule classe active sur les éléments de menu ?

Basculer dynamiquement les classes sur les éléments de menu avec jQuery

Dans cet article, nous rencontrons un scénario dans lequel nous cherchons à ajouter et à supprimer des classes de manière dynamique lorsque des éléments de menu particuliers sont cliqués. L'objectif est de maintenir une seule classe active à la fois, imitant un comportement typique de navigation dans les menus.

Pour y parvenir, nous ajoutons dans un premier temps la classe 'current' au 'about-link' pour désigner sa classe active initiale. État. Par la suite, nous attachons un écouteur d'événement au

éléments dans le menu. Lorsqu'un

est cliqué, il gagne la classe « actuelle », tandis que ses frères et sœurs voient la classe supprimée, garantissant l'exclusivité.

Cependant, afin de refléter de manière appropriée l'état actif dès le départ, nous pouvons affiner notre approche. Au lieu d'ajouter directement la classe « actuelle » au « lien à propos », nous pouvons utiliser un gestionnaire d'événements modifié qui supprime d'abord la classe « actuelle » de tous les éléments « a » existants dans le menu qui la possèdent actuellement. Nous ajoutons ensuite la classe 'current' à l'élément cliqué. Cet ajustement garantit que le « lien à propos » démarre sans la classe « actuelle » et maintient l'état actif unique souhaité tout au long de l'interaction du menu.

Voici le code jQuery amélioré avec ce raffinement :

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

Cette approche garantit que le menu commence par le « lien à propos » dans son état par défaut et bascule dynamiquement la classe active lorsque d'autres éléments de menu sont cliqués, en respectant l'option souhaitée. fonctionnalité.

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!