使用引导程序将我的导航栏的链接设置为活动

Question

I try to set active the element of my navbar when I click on the button.

My navbar is like that:

But when I click on the "a" for exemple, the "G" remains active.

My code is like that:

<div class="navbar span8" id="navbar">
    <div class="navbar-inner">
        <ul class="nav">
             <li><a href="#a">A</a></li>
             <li><a href="#b">B</a></li>
             <li><a href="#c">C</a></li>
             <li><a href="#d">D</a></li>
             <li><a href="#e">E</a></li>
             <li><a href="#f">F</a></li>    
              .....         
       </ul>
    </div>
</div>

To set a class active the code is:

 <li class="active"><a href="#f">F</a></li>

How can I do that with jQuery?

Answer 1

You can set it active like this..

$('.nav li').click(function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
})

Bootply

Answer 2

My solution works well when creating restful sites.

The main JS is here:

$(document).ready(function() {
    var main_route = (window.location.pathname.split("/")[1]);
    $('#navbar_' + main_route).addClass('active');
});

It works by:

1) Finding the main route of the URL. For example if the url was " http://www.benyon.com/projects/first_project " it would get "projects".

JS snippet

var main_route = (window.location.pathname.split("/")[1]);

2) It then uses that to refer to the ID of the list element for that particular button using concatenation. For example: '#navbar_' + main_route is the same as '#navbar_projects' .

It then adds the “active” class using addClass('active') .

JS snippet

$('#navbar_' + main_route).addClass('active');

HTML snippet

<li id="navbar_projects"><a href="/projects">Projects</a></li>

The Downside

For this to work your routes need to have the same name as the index of the element you want to highlight.

Answer 3

You could use this code:

SEE DEMO

$('.nav li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
})