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

【问题标题】：Set link of my navbar active with bootstrap使用引导程序将我的导航栏的链接设置为活动状态
【发布时间】：2013-05-31 11:30:40
【问题描述】：

单击按钮时，我尝试将导航栏的元素设置为活动状态。

我的导航栏是这样的：

但是当我例如点击“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 做到这一点？

【问题讨论】：

如果您仅在一个页面上使用导航栏，但如果您实际上是在页面之间跳转，则以下方法将很有用，那么您将不得不使用 cookie 之类的其他东西来实现解决方案，或者可能php.

标签： javascript jquery html twitter-bootstrap navbar

【解决方案1】：

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

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

Bootply

【讨论】：

【解决方案2】：

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

主要的JS在这里：

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

它的工作原理：

1) 找到 URL 的主路由。例如，如果 url 是“http://www.benyon.com/projects/first_project”，它会得到“projects”。

JS sn-p

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

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

然后它使用addClass(‘active’) 添加“活动”类。

JS sn-p

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

HTML sn-p

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

缺点

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

【讨论】：

【解决方案3】：

您可以使用以下代码：

SEE DEMO

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

【讨论】：