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

【问题标题】：Boostrap Nav bar: how do I make each tab highlight as "active" when I tab across?Bootstrap Navbar：当我跨过标签时，如何使每个标签突出显示为“活动”？
【发布时间】：2015-01-16 20:32:22
【问题描述】：

我正在使用来自 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;
}

【问题讨论】：

查看引导文档中的tabs。

标签： css twitter-bootstrap

【解决方案1】：

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

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

检查此引导：http://www.bootply.com/8DULSi0lNV

【讨论】：

太棒了 - 谢谢.. 一个问题，脚本将课程移动到下一个选项卡，但过了一会儿又回到“工作分析”对不起，我不擅长 js。我将脚本放在页面底部的几个脚本标签之间。我希望它在它自己的文件中。我希望我搞砸了“加载中”还是这个 Jquery 需要“准备好文档”？那么我做错了什么？非常感谢！
检查编辑后的答案，您只需在页面底部的 js 脚本中包含这些行，如果您有任何疑问，请随时包含您的完整 js 代码。
嗨帕特里克 - 过去一个小时我一直在努力让事情顺利进行。问题是 js 可以工作，但它只能工作大约 0.5 秒，然后应用原始 css。所以换句话说，标签改变了大约 0.5 秒，然后返回。有任何想法吗？？非常感谢！
@Vince 尝试测试这个bootply.com/sEBEdfjavc: $(document).ready(function() { $(".nav a").on("click", function(e){ e .preventDefault(); $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); }); });
@pstrick-lc 嗨，谢谢帕特里克！好吧，它有点奏效..但又是行不通。您会看到我的标签页位于 Boostrap Dashboard 页面内，如给定 getbootstrap.com/examples/dashboard/# 所以您的新代码现在确实将突出显示的标签页移动到整个页面，但它也以某种方式禁用了页面 LHS 下方的链接。