Question

这是我的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？

Answer 1

navbar.js的代码没问题，也许jQuery不能在你的项目中本地工作？尝试在</body>标记之前添加脚本。

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

1 个答案: