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

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>标记之前添加脚本。

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1