Bootstrap 导航栏活动状态不起作用

IT技术 javascript html twitter-bootstrap twitter-bootstrap-3
2021-02-05 23:35:24

我有引导程序 v3。

我class="active"在我的navbar上面使用并且当我按下菜单项时它不会切换。我知道如何使用jQuery并构建点击功能，但我认为此功能应该包含在引导程序中？所以也许这是一个 JavaScript 问题？

这是我包含的 js/css/bootstrap 文件的标题：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>

这是我的navbar代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/index.php">MyBrand</a>
            </div>

            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="/index.php">Home</a>
                    </li>

                    <li>
                        <a href="/index2.php"> Links</a>
                    </li>

                    <li>
                        <a href="/history.php">About</a>
                    </li>
                    <li>
                        <a href="/contact.php">Contact</a>
                    </li>

                    <li>
                        <a href="/login.php">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我设置对了吗？

（在一个不相关的注释上，但可能相关？当菜单移动时，我单击菜单按钮并折叠起来。再次按下它并不会将其折叠起来。所以这个问题，与另一个一样，都表示错误的 JavaScript 设置也许？）

6个回答

您已经包含了缩小的 Bootstrap js 文件和折叠/转换插件，而文档说明：

bootstrap.js 和 bootstrap.min.js 都在一个文件中包含所有插件。
只包括一个。

和

对于简单的过渡效果，将 transition.js 与其他 JS 文件一起包含一次。如果您使用的是编译（或缩小）的 bootstrap.js，则无需包含它——它已经存在了。

所以这很可能是你的最小化问题的问题。

对于活动类，您必须自己管理它，但它只是一两行。

引导程序 3：

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

Bootply：http : //www.bootply.com/IsRfOyf0f9

引导程序 4：

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
@Blaszard 在非单页应用程序/站点中，默认情况下您应该active在该nav项目上设置类。
2021-03-15 23:35:24
如果您从页面移动到另一个页面href（不是散列而是发送另一个请求），这是否有效？
2021-04-01 23:35:24
它对我不起作用，它正在被添加，但在下一秒它会进入初始活动类，所以它不会停留在页面上，请任何人对此提供帮助
2021-04-03 23:35:24
@sourav78611 因为当您单击链接时正在刷新页面。此解决方案适用于 ajax 请求。对于下面由 Jon 工作的非 ajax 请求解决方案。
2021-04-05 23:35:24
@Pete TNT - 仍然不清楚，当人们给出 90% 的解决方案并假设每个人都知道如何应用剩下的 10% 时，这非常令人沮丧。尤其是在语法难以掌握的情况下。
2021-04-11 23:35:24

这是我切换活动页面的解决方案

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
在没有任何 <script> 标签的 site.js 中添加了相同的内容，它工作了 $(document).ready(function () { $('li.active').removeClass('active'); $('a[href= "' + location.pathname + '"]').closest('li').addClass('active'); });
2021-03-15 23:35:24
我们应该把这个放在哪里？对不起; JS 新手：#
2021-03-31 23:35:24
这在 Bootstrap 4 中工作正常。@Thomas8：这应该在<script>和</script> tags at the bottom of the html file before the </body>` 标记之间（假设您在一个 html 文件中拥有所有内容）。
2021-04-03 23:35:24
我正在使用引导程序 4，这对我有用。谢谢
2021-04-06 23:35:24
完美运行！如果菜单 url 包含搜索参数，请替换location.pathname为location.pathname + location.search以使其工作！
2021-04-10 23:35:24

这对我来说非常有效，因为“window.location.pathname”还包含真实页面名称之前的数据，例如 directory/page.php。因此，只有当 url 包含此链接时，实际的导航栏链接才会被设置为活动状态。

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});
除了你的以外，所有其他解决方案都不起作用，我一一尝试了
2021-03-26 23:35:24

使用 3.3.4 版的 bootstrap，在长 html 页面上，您可以参考 pg 的部分。通过 class 或 id 来管理活动导航栏链接，带有 body 元素的 spy-scroll：

  <body data-spy="scroll" data-target="spy-scroll-id">

数据目标将是一个 id="spy-scroll-id" 的 div

    <div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>

这应该通过单击来激活链接，而无需任何 javascript 功能，并且还会在您滚动浏览页面的相应链接部分时自动激活每个链接，而 js onclick() 不会。

谢谢。它应该是： data-target="#spy-scroll-id" 而不是 data-target="spy-scroll-id"
2021-04-11 23:35:24

您需要做的就是将data-toggle="tab" 添加到引导程序导航栏中的链接中，如下所示：

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
这是真正有用的，但是当你有一个导航栏，导航（正常）和它不工作也是一个导航栏，右边第二个列表。你最终会得到两个从未被清除的活动
2021-03-13 23:35:24
当我添加“data-toggle”时，页面无法转到href中指定的“#place”。
2021-03-17 23:35:24
其实是更新。正如@scorpiozj 提到的。添加此链接后，链接本身不起作用
2021-03-30 23:35:24
其它你可能感兴趣的问题
上一篇如何将异步函数调用包装到 Node.js 或 Javascript 中的同步函数中？ 下一篇如何将参数传递给 Script 标签？