addClass in JQuery

Question

I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.

Below is my HTML code:

<div class="nav-collapse collapse">  
    <ul class="nav pull-right">
        <li id="home" class="active"><a href="index.php"> Home</a></li>
        <li id="about"><a href="about_us.php"> About Us</a></li>
        <li id="browse"><a href="browse.php"> Browse</a></li>
        <li id="contact"><a href="contact.php"> Contact</a></li>
    </ul> 
</div>

And below is the JQuery code that I use and try to get this done.

$(function (){              
   var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){ 
    if($(this).hasClass('active')){ 
    //If click on the tab that is currently active, it will do nothing.  
    }else{      
            sidebar.find('.active').addClass('inactive'); 
            sidebar.find('.active').removeClass('active');   
            $(this).removeClass('inactive');            
            $(this).addClass('active'); 
         }
     });
});

I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!

Answer 1

When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.

Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.

You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.

---

Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.

Answer 2

This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?

Answer 3

The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.

If you want to have a single page app, you can use preventDefault to stop the browser from following the link.

sidebar.delegate("li", "click", function(e){
    e.preventDefault();
    if($(this).hasClass('active')){ 
        //If click on the tab that is currently active, it will do nothing.
    }else{
        sidebar.find('.active').addClass('inactive'); 
        sidebar.find('.active').removeClass('active');   
        $(this).removeClass('inactive');            
        $(this).addClass('active');
     }
 });