Add active class dynamically to bootstrap menu and opening its page

Question

This is a code of HTML that I created for navigation bar using bootstrap.

<div id="menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">videos</a></li>
        <li><a href="#">Comment</a></li>
        <li><a href="#">About</a></li>
        <li ><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

Now I need to add this li's active class dynamically for menu items when that page is open.

I just check these two stackoverflow question : one | two

But I couldn't figure this out.

This is my javascript -

$('#menu > ul.navbar-nav li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Hope someone will help me out. Thank you.

Answer 1

Since you are using Bootstrap, include the defult javascript plugins bootstrap.js or the minified bootstrap.min.js you can have menus items dynamically actived by adding data-toggle="tab" to your li elements like this

<div id="menu">
    <ul class="nav navbar-nav">
        <li data-toggle="tab"><a href="index.html">Home</a></li>
        <li data-toggle="tab"><a href="#">Gallery</a></li>
        <li data-toggle="tab"><a href="#">videos</a></li>
        <li data-toggle="tab"><a href="#">Comment</a></li>
        <li data-toggle="tab"><a href="#">About</a></li>
        <li data-toggle="tab"><a href="contact_us.html">Contact</a></li>
    </ul>
</div>

As written in the official document, check here

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

Answer 2

You may try this (DEMO):

$('#menu > ul.nav li a').click(function(e) {
    var $this = $(this);
    $this.parent().siblings().removeClass('active').end().addClass('active');
    e.preventDefault();
});

Btw, you should target the <a> instead of li. You may need to retrieve the href value and $(this).attr('href') will return it but you can do it either way, anyways.

Also, this will only handle highlighting the active item but you need to add code to load the clicked page and hope you'll do it using ajax and you know how to do it.

Update:

If you want to load the clicked item/page normally (without using JavaScript/ajax) then you need to remove e.preventDefault() but in this case this code won't highlight the active li and you need to do it from server side and other 3 answers are also given according to your current question which is about highlighting the current clicked item, you didn't mention anything about page loading and I assumed you are doing it using ajax and so did others as well (I think so).

Update for Ajax:

$('#menu > ul.nav li a').click(function(e) {
    var $this = $(this);
    $this.parent().siblings().removeClass('active').end().addClass('active');
    e.preventDefault();

    // Load the page content in to element
    // with id #content using ajax (There are other ways)
    $('#content').load($this.href());
});

Read more about it on jQuery website.