1100111011100100110010101100111

Ajouter simplement une classe active dans un menu avec jQuery

Une opération que l’on souhaite souvent réaliser : ajouter une classe “active” à un élément cliqué et supprimer cette même classe sur tous les autres éléments du menu. Voici un petit script qui le fait très simplement.

Supposons avoir le code HTML suivant :

<ul class="menu">
 <li><a href="item1.php"><span>item1</span</a></li>
 <li><a href="item2"><span>item2</span></a></li>
</ul>

Il suffit alors d’installer jQuery et de placer le script suivant dans la balise <body> :

<script type="text/javascript">
$(document).ready(function(){
 $(".menu a").click(function() {
 $(".menu a").each(function(){
 $(this).removeClass("active");
 });
 $(this).addClass("active");
 });
});
</script>

Précédent

Le petit futé de la Californie et de New-York

Suivant

Test Kodak Zi6 HD

  1. Tom

    Simple et efficace, merci ;-)

  2. Kovaldski

    ty dude !

  3. Merci, c’est parfait. D’habitude, je le fais avec php mais ce script est utile pour un site “one page”.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Fièrement propulsé par WordPress & Thème par Anders Norén