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

Question

我有引导程序 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 设置也许？）

原文由 TheLettuceMaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您已经包含了缩小的 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");
 });

引导层：http: //www.bootply.com/IsRfOyf0f9

引导程序 4：

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

原文由 Pete TNT 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

$(document).ready(function() {
  $('li.active').removeClass('active').removeAttr('aria-current');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active').attr('aria-current', 'page');
});

原文由 Jon 发布，翻译遵循 CC BY-SA 4.0 许可协议