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

小编典典

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

javascript

我有bootstrap 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设置也许？）

阅读 371

2020-05-01

共1个答案

小编典典

您已经包括了缩小的Bootstrap js文件和合拢/转换插件，而文档指出：

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

和

为了获得简单的过渡效果，请在其他JS文件旁边添加一次transition.js。如果您使用的是已编译（或精简）的bootstrap.js，则无需包含此文件-
它已经存在。

因此，这可能是最小化问题的问题。

对于活动的班级，您必须自己进行管理，但这只是一两行。

引导程序3：

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

引导程序4：

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

2020-05-01