Problème lors de l'ajout d'un élément de classe à un élément

Question

J'essaie de supprimer un attribut de classe d'un élément et d'ajouter la classe à un autre élément. J'ai réussi à supprimer la classe mais j'ai eu du mal à ajouter la classe à l'autre élément.

Lorsque je clique sur le lien « Voir tous »,

<a class="code_link" id="viewAllMyForms" href="#" >View All</a> 

Cette fonction est called.I à supprimer la classe « sélectionnée » de l'élément li « maison » et l'ajouter à l'élément li de myForms.

$('#viewAllMyForms').click(function(){ 

    $('#tabber_module').find(".selected").removeClass(); 
    $('#tabber_module #myForms li').addClass("selected"); 

}); 

<div class="tabber_module" id="tabber_module"> 
    <ul class="horizontal_navigation child2"> 
     <li class="first some_li selected" id="home"> 
      <a href="#" id="home">Home</a> 
     </li> 
     <li class="some_li" id="notifications"> 
      <a href="#" id="notifications">Notifications</a> 
     </li>   
     <li class="some_li" id="myForms"> 
      <a href="#" id="myForms" >My Forms</a> 
     </li>    
     <li class="some_li" id="reviewForms"> 
      <a href="#" id="reviewForms">Forms For My Review</a> 
     </li> 
     <li class="some_li" id="otherForms"> 
      <a href="#" id="otherForms">Other Forms</a> 
     </li> 
    </ul> 
</div> 

La classe « sélectionnée » est supprimée forme l'élément li « maison » mais n'est pas ajouté à l'élément li « de MyForms ».

Answer 1

Vous avez id sur vos éléments LI, il vous suffit d'utiliser le sélecteur #id:

$('#viewAllMyForms').click(function(){ 
    $("#tabber_module .selected").removeClass("selected"); 
    $("#myForms").addClass("selected"); 
}); 

Note: L'attribut id des éléments DOM est censé être un identifiant unique, vous avez dupliqué l'ID des éléments LI et A, vous ne devez utiliser un ID qu'une seule fois dans un document.

Je réécrire votre balisage comme ceci:

<div class="tabber_module" id="tabber_module"> 
    <ul class="horizontal_navigation child2"> 
     <li class="first some_li selected" id="home"> 
      <a href="#">Home</a> 
     </li> 
     <li class="some_li" id="notifications"> 
      <a href="#">Notifications</a> 
     </li>   
     <li class="some_li" id="myForms"> 
      <a href="#">My Forms</a> 
     </li>    
     <li class="some_li" id="reviewForms"> 
      <a href="#">Forms For My Review</a> 
     </li> 
     <li class="some_li" id="otherForms"> 
      <a href="#">Other Forms</a> 
     </li> 
    </ul> 
</div> 

Notez que j'ai supprimé l'attribut ID dupliqués à partir des éléments d'ancrage, mais si vous voulez sélectionner un point d'ancrage, vous pouvez sans avoir une carte d'identité spécifique, par exemple :

$('#notifications a') // selects the element <a href="#">Notifications</a>