首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >引导导航栏活动状态不工作

引导导航栏活动状态不工作
EN

Stack Overflow用户
提问于 2014-07-02 00:00:30
回答 22查看 319.4K关注 0票数 99

我有bootstrap v3。

我在navbar上使用class="active",当我按下菜单项时,它不会切换。我知道如何使用jQuery和构建一个单击函数,但我认为这个功能应该包含在bootstrap中?所以这可能是JavaScript的问题?

下面是我包含的js/css/bootstrap文件的头文件:

代码语言:javascript
复制
<!-- 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代码:

代码语言:javascript
复制
<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设置?)

EN

回答 22

Stack Overflow用户

发布于 2016-04-08 22:18:56

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

代码语言:javascript
复制
$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
票数 108
EN

Stack Overflow用户

发布于 2016-03-11 18:02:44

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

代码语言:javascript
复制
$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});
票数 19
EN

Stack Overflow用户

发布于 2015-05-04 14:44:33

在3.3.4版本的bootstrap中,在长的html页面上,你可以参考pg的部分。通过class或id使用spy-scroll和body元素管理活动导航栏链接:

代码语言:javascript
复制
  <body data-spy="scroll" data-target="spy-scroll-id">

数据目标将是一个带有id=“id=-scroll-id”的div

代码语言:javascript
复制
    <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()不会这样做。

票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24514717

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档