Comment mettre en surbrillance un seul élément de liste à la fois à l'aide de « addClass() » et «removeClass()» de jQuery ?

Ajouter et supprimer une classe en cliquant sur jQuery

Lorsque vous travaillez avec des éléments de menu de liste, il est souvent souhaitable de mettre en surbrillance l'élément actuellement actif en ajouter une classe. Cependant, vous pourriez rencontrer des difficultés pour vous assurer qu'un seul élément possède la classe à la fois.

Pour résoudre ce problème, utilisez les méthodes addClass() et removeClass() de jQuery. Dans un premier temps, ajoutez la classe à l'élément de départ souhaité, tel que « about-link ». Ensuite, utilisez un écouteur d'événement sur l'élément de liste (« menu li ») pour gérer les clics.

Dans l'écouteur d'événement, utilisez la méthode siblings() pour supprimer la classe de tous les autres éléments de la liste. Cela garantit que seul l'élément cliqué conserve la classe. Cependant, pour commencer avec le 'about-link' actif, nous devons ajouter une ligne de code supplémentaire :

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

Dans ce code modifié, nous sélectionnons les éléments 'a' dans les éléments de la liste (' menu li a') pour garantir que nous ciblons les liens. Nous utilisons ensuite la classe actuelle comme sélecteur pour la supprimer de tout lien précédemment actif avant de l'ajouter au lien cliqué. Cela élimine le besoin d'ajouter manuellement la classe à « about-link » dans le JavaScript initial.

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!