Bootstrap Navbar：当我选中时，如何使每个标签突出显示为“活动”？

Question

我正在使用twitter Boostrap的导航栏。

太棒了 - 我的问题是，当我选中时，如何让后续标签突出显示红色，前一个标签变为灰色？

这是HTML：

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Job Analysis</a></li>
    <li role="presentation">{{link_to('crews', 'Crews')}}</li>
    <li role="presentation">{{link_to('contractors', 'Contractors')}}</li>
</ul>

以下是Bootstrap为活动类提供的css：

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: red;
}

以下是非活动标签的css：

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

Answer 1

您可以添加自己的代码来更改当前标签的活动类。 在这种情况下，它将是：

$(document).ready(function() {
    $(".nav a").on("click", function(){
        $(".nav").find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });
}); 

检查这个bootply：http://www.bootply.com/8DULSi0lNV