引导导航活动状态不起作用

Bootstrap Navigation active state not working

本文关键字：不起作用 活动状态 导航      更新时间：2024-05-29

大家好，当我点击其他链接时，我的引导导航焦点没有改变。链接发生了变化，但重点仍然放在主页链接上。

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

下面是钢笔。

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>

请帮帮我。

谢谢。

任何时候出现问题，都可以打开inspect元素。转到控制台，您将看到此错误。

Uncaught Error: Bootstrap's JavaScript requires jQuery

您需要包含jQuery库，以便引导JavaScript正常工作。

如另一个答案所述，您需要设置活动状态。

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

http://codeply.com/go/m69a3wUly3

您的Codepen失败有两个原因：

  1. jquery包含在bootstrap.js之后
  2. 您没有任何JS来在导航栏中设置active类
相关文章：