引导导航活动状态不起作用[重复]答案

【问题标题】：Bootstrap Navigation active state not working [duplicate]引导导航活动状态不起作用[重复]
【发布时间】：2016-08-04 14:30:57
【问题描述】：

您好，人们需要帮助，当我单击其他链接时，我的引导导航焦点没有改变。链接发生变化，但焦点仍停留在主页链接上。

我看到很多帖子都有同样的问题，并尝试了所有可能的解决方案。我仍然无法理解为什么它不起作用。

下面是笔。

http://codepen.io/iamsakib/pen/wGmWEe?editors=1000

我的头是这样的：

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome</title>
    <link href="css/resets.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

请帮帮我。

谢谢。

【问题讨论】：

既然您尝试了很多事情，您能详细说明您尝试帮助我们帮助您的方式吗？
不确定你的意思。活动状态不是通过单击链接创建的。它是通过在链接中设置“活动”类来创建的。
@EoghanTadhg 不是这里的问题，请参阅我的回答。
@EoghanTadhg 我试过那个答案，但没有结果
您的 codepen 示例运行良好。那么问题出在哪里？

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

只要您有问题，请打开检查元素。转到控制台，您会看到此错误。

Uncaught Error: Bootstrap's JavaScript requires jQuery

您需要包含 jQuery 库才能使引导 JavaScript 工作。

【讨论】：

谢谢你的回答鹅。但是我在 bootstrap.min.js 上面包含了 jquery。我尝试查看我的控制台，但它没有显示任何内容。
@Sakib 修复您的 codepen 以包含 jQuery，以便我们可以看到您所看到的。

【解决方案2】：

如other answer 中所述，您需要设置活动状态。

$('.nav>li').click(function(){
    $('.active').toggleClass("active");
    $(this).toggleClass("active");
})

http://codeply.com/go/m69a3wUly3

您的 Codepen 失败有两个原因：

jquery 包含在 bootstrap.js 之后
您没有任何 JS 在导航栏中设置 active 类

【讨论】：

在 js 文件中添加上述代码后，它现在可以在我的笔上正常工作。但是当我运行它时它不适用于我的项目。我使用的是 VS 2013，会不会有 IDE 问题？
仔细检查控制台是否有错误。如果我们不能重现问题，那就很难知道了。