导航栏引导程序中的活动状态不起作用答案

【问题标题】：Active state in navbar bootstrap not working导航栏引导程序中的活动状态不起作用
【发布时间】：2018-08-09 11:31:53
【问题描述】：

这是我的 navbar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/js/navbar.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MyFlaskApp</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav nav-pills navbar-left">
            <li role="presentation" class="active"><a href="/">Home</a></li>
            <li role="presentation"><a href="/about">About</a></li>
            <li role="presentation"><a href="articles">Articles</a></li>
          </ul>

          <ul class="nav nav-pills pull-right">
            {% if session.logged_in %}
              <li role="presentation"><a href="/dashboard">Dashboard</a></li>
              <li role="presentation"><a href="logout">Logout</a></li>
            {% else %}
              <li role="presentation"><a href="showSignUp">Register</a></li>
              <li role="presentation"><a href="showSignIn">Login</a></li>
            {% endif %}

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</body>
</html>

这是我的 navbar.js

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

我尝试了http://www.bootply.com 中的代码，它工作正常。它正是我想要的。但是在我的应用程序中，当我切换页面时它不起作用。它仍然显示在家中处于活动状态。

这是我的文件的样子：

也许我没有导入正确的 navbar.js？

【问题讨论】：

bootstrap.css 在哪里？
在 layout.html 我有 "maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">" 和 navbar.html我包含在 layout.html

标签： jquery html twitter-bootstrap navbar

【解决方案1】：

来自 navbar.js 的代码没问题，也许 jQuery 在您的项目中不能本地工作？试着把它放在你的脚本之前</body>标签。

【讨论】：

是的！你是对的！我是所有这些东西的新手。我必须检查头部脚本和正文脚本之间的区别。非常感谢！
实际上，例如，我可以看到它在文章上的活动状态如何变化，然后立即再次在主页上处于活动状态..