Bootstrap 导航栏活动状态不起作用 [英] Bootstrap navbar Active State not working

问题描述

我有 bootstrap v3.

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

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

<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代码:

<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><a class="navbar-brand" href="/index.php">MyBrand</a>

<div class="collapse navbar-collapse navbarCollapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="/index.php">首页</a><li><a href="/index2.php">链接<li><a href="/history.php">关于</a><li><a href="/contact.php">联系方式</a><li><a href="/login.php">登录</a>

</nav>

我的设置正确吗?

(在一个不相关的注释上，但可能相关?当菜单移动时，我点击菜单按钮，它会折叠起来.再次按下它并不会取消折叠它.所以这个问题，与另一个，两者都可能表示 JavaScript 设置错误?)

解决方案

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

I have bootstrap v3.

I use the class="active" on mynavbar and it does not switch when I press menu items. I know how to do this with jQuery and build a click function but I'm thinking this functionality should be included in bootstrap? So maybe it is a JavaScript issue?

Here is my header with my js/css/bootstrap files I have included:

<!-- 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>

Here is my navbar code:

<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>

Am I setting this up right?

(On an unrelated note, but possible related? When the menu goes mobile, I click the menu button and it collapses. Pushing it again does not un-collapse it though. So this issue,. with the other, both signify wrong JavaScript setup perhaps?)

解决方案

You have included the minified Bootstrap js file and collapse/transition plugins while the docs state that:

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
Include only one.

and

For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

So that could well be your problem for the minimize problem.

For the active class, you have to manage it yourself, but it's just a line or two.

Bootstrap 3:

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

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

Bootstrap 4:

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

这篇关于Bootstrap 导航栏活动状态不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！