使用bootstrap设置我的导航栏的链接

Question

当我点击按钮时，我尝试设置导航栏的元素。

我的导航栏就是这样：

但是当我点击“a”作为示例时，“G”仍然有效。

我的代码是这样的：

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

要设置一个活动的类，代码为：

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

我如何用jQuery做到这一点？

Answer 1

您可以将其设置为活动状态..

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

Bootply

Answer 2

我的解决方案在创建宁静网站时效果很好。

主要的JS在这里：

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

通过以下方式工作：

1）查找网址的主要路线。例如，如果网址为“http://www.benyon.com/projects/first_project”，则会显示“项目”。

JS代码段

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

2）然后使用它来引用使用连接的特定按钮的列表元素的ID。例如： ‘#navbar_’ + main_route与‘#navbar_projects’相同。

然后使用addClass(‘active’)添加“有效”类。

JS代码段

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

HTML代码段

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

The Downnside

为此，您的路线需要与要突出显示的元素的索引具有相同的名称。

Answer 3

您可以使用此代码：

SEE DEMO

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