Problem in adding a class element to an element.

Question

I'm trying to remove a class attribute from an element and add the class to another element. I successfully removed the class but having problem in appending the class to the other element.

When I click the link 'View All',

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

This function is called.I want to remove the class "selected" from the li element "home" and add it to the li element of 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>

The class "selected" is removed form the "home" li element but is not added to the "myForms" li element.

Answer 1

You have id's on your LI elements, you only need to use the #id selector:

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

Note: The id attribute of the DOM elements is supposed to be a unique identifier, you have duplicated the id of the LI and A elements, you should use an ID only once in a document.

I would rewrite your markup as this:

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

Note that I removed the duplicated ID attribute from the anchor elements, but if you want to select an anchor you can without having an specific ID, for example:

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