Question

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

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

以下是笔。

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>

请帮帮我。

感谢。

Answer 1

任何时候遇到问题，请打开检查元素。转到控制台，您将看到此错误。

Uncaught Error: Bootstrap's JavaScript requires jQuery

您需要包含用于引导JavaScript的jQuery库才能工作。

Answer 2

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

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

http://codeply.com/go/m69a3wUly3

您的Codepen失败有两个原因：

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

Bootstrap Navigation活动状态不起作用

2 个答案: