jquery: supprimer la classe précédente en cliquant sur

Question

J'ai une question très simple mais je n'arrive pas à la comprendre par moi-même. J'ai le problème suivant.

J'ai plusieurs éléments de liste comme ci-dessous.

<li></li> 
      <li> 
       <img src="images/persoon1.jpg" alt="persoon1"> 
       <div id="infoPersoon"> 
        <h3>Jaap-Jan van der Gouw</h3> 
        <ul id="contactInfo"> 
         <li class="label">T</li> 
         <li>070 31 31 066</li> 
         <li class="label">F</li> 
         <li>070 31 31 066</li> 
         <li class="label">M</li> 
         <li>070 31 31 066</li> 
        </ul> 
        <ul id="contactOpties"> 
         <li class="email"><a href="#" class="active">Email</a></li> 
         <li class="publicaties"><a href="#">Publicaties</a></li> 
         <li class="vcard"><a href="#">Vcard</a></li> 
         <li class="meerinfo"><a href="#">Meer info</a></li> 
        </ul> 
       </div> 
      </li> 
      <li></li> 

le problème est que je veux ajouter une classe par la liste actuelle i cliqué sur, et quand je clique sur l'élément suivant de la liste, la classe précédente « active » doit être supprimer.

comment puis-je résoudre ce problème.

Answer 1

L'approche la plus commune est de supprimer la classe active de toute balise qui a comme:

$(".active").removeClass("active"); 

Pour mettre tous ensemble serait:

$("li").click(function() { 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 2

Vous pouvez ajouter un gestionnaire click comme ceci:

$("#contactOpties li a").click(function() { 
    $(this).addClass('active') 
     .parent().siblings().children().removeClass('active'); 
}); 

You can give it a try here. Cela ajoute la classe uniquement sur le clic, mais vous pouvez également désactiver la classe .active si vous avez cliqué, faites à cette utilisation .toggleClass() au lieu de .addClass().

---

Ou alors vous avez des options, vous pourriez avoir le gestionnaire de clic sur le <li> ou utiliser .delegate() (utile pour beaucoup d'éléments, ou les changements dynamiques), comme celui-ci:

$("#contactOpties").delegate("li", "click", function() { 
    $(this).children('a').addClass('active').end() 
     .siblings().children().removeClass('active'); 
}); 

You can give that a try here.