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

Posted 2023-05-08

技术标签:

【中文标题】导航栏引导程序中的活动状态不起作用【英文标题】：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 【参考方案1】：

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

【讨论】：

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

以上是关于导航栏引导程序中的活动状态不起作用的主要内容，如果未能解决你的问题，请参考以下文章

当我放一个 href 时，jQuery 导航栏中的活动类不起作用

切换按钮在引导程序4中不起作用，而角度7应用程序在导航栏中不起作用

反应引导导航栏崩溃不起作用

引导下拉链接不起作用

直接来自文档的引导导航栏不起作用

带有按钮组的引导下拉切换在导航栏中不起作用