Comment puis-je utiliser jQuery pour gérer l'état actif des éléments de menu ?

Changer l'état des éléments de menu avec jQuery

Dans cet article, nous verrons comment utiliser les capacités de jQuery pour gérer dynamiquement les classes styles pour les éléments de liste dans un menu. L'objectif est d'ajouter la classe « actuelle » à un élément de liste spécifique lors d'un clic et de la supprimer simultanément de tous les autres éléments.

Configuration initiale

Pour lancer la fonctionnalité , nous devons d'abord définir les éléments de menu avec

éléments et liens utilisant des balises . Nous ajouterons une classe « actuel » à l'un des liens d'élément de liste pour indiquer l'élément initialement sélectionné :

<ul>

Ajout d'un écouteur d'événement

Utilisation de jQuery , nous attachons un écouteur d'événement au lien de chaque élément de la liste pour gérer le clic event :

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

Explication

Dans l'écouteur d'événement, l'extrait de code jQuery effectue les tâches suivantes :

1. Ajoute le ' classe actuelle vers le lien de l'élément de liste cliqué en utilisant $(this).addClass('current').
2. Supprime la classe 'current' de tous les autres liens d'éléments de liste en utilisant $('#menu li a.current').not(this).removeClass ('actuel'). Cette ligne sélectionne tous les liens avec la classe 'current' et exclut celui actuellement cliqué.

Résultat

En conséquence, lorsqu'un utilisateur clique sur n'importe quel des éléments de menu, son lien obtiendra le style de classe « actuel », tandis que la classe « actuelle » sera supprimée de l'élément précédemment actif. Cela garantit qu'un seul lien d'élément de liste a le style actuel à un moment donné.

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!