要素にクラス要素を追加する際の問題

Question

要素からクラス属性を削除して、クラスを別の要素に追加しようとしています。 クラスを正常に削除しましたが、クラスを他の要素に追加する際に問題があります。

私はリンクをクリックすると「すべてを見る」、

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

この関数はcalled.Iではli要素「自宅」から「選択」クラスを削除するとのli要素に追加したいです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> 

"ホーム" li要素から "selected"クラスは削除されますが、 "myForms" li要素には追加されません。

Answer 1

あなたが唯一#idセレクタを使用する必要があり、あなたのLI要素にidを持っている：

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

を注：DOM要素のid属性は一意の識別子であることを想定している、あなたが重複していますLI要素とA要素のIDは、ドキュメント内で一度だけIDを使用する必要があります。

私はこれとしてあなたのマークアップを書き換えます：私はアンカー要素から重複ID属性を削除していますが、特定のIDを持たずにあなたができるアンカーを選択したい場合は、例えば

<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> 

注意：複数の要素に同じIDを持つ

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