14

我在顶部构建了一个带有 5 个链接的导航栏。在页面本身，我根据元素中 # 标记后的名称添加了 5 个带有 id 的部分。问题是最后一个导航链接按钮被突出显示（“活动”类在开始时在运行时添加到它，尽管在代码本身中第一个导航栏项设置为“活动”。我有最新的引导程序版本，它是 v2 .0.4 出了什么问题？

<div class="navbar" id="MenuBar">
    <div class="topHeadContentLogo"></div>
    <ul class="nav nav-pills" id="MenuUl">
        <li class="active"><a href="#Weekly">Weekly</a></li>
        <li class=""><a href="#Post">Post</a></li>
        <li class=""><a href="#Audience">Audience</a></li>
        <li><a href="#Website">Website</a></li>
        <li><a href="#FAQ">FAQ</a></li>
    </ul>
</div>

<div id="contentDiv">
    <section id="Weekly">
        <h1>weekly</h1>
    </section>

    <section id="Post">
        <h1>Post</h1>
    </section>

    <section id="Audience">
        <h1>Audience</h1>
    </section>

    <section id="Website">
        <h1>Website</h1>
    </section>

    <section id="FAQ">
        <h1>FAQ</h1>
    </section>
</div>



$('#MenuBar').scrollspy(); after document ready
4

6 回答 6

12

如果您在元素上有data-spyset body，请确保该body元素未设置为height: 100%;. 这就是我的问题。

于 2012-11-15T07:43:59.683 回答
4

您是否已添加data-spy="scroll"到<body>标签（或任何其他相关标签）？

于 2012-06-14T13:29:48.050 回答
3

这只是发生在我身上，我在我试图滚动的那个元素中的一个额外元素上有 data-spy="scroll" （它是从某事遗留下来的，不应该在那里）。删除这个解决了这个问题。

于 2012-09-03T03:27:12.717 回答
1

最新的引导文档建议如下

添加data-spy="scroll"到要监视的元素（通常是正文）并data-target=".navbar"选择要使用的导航

通过数据属性

<body data-spy="scroll" data-target=".navbar">...</body>

$(function () {
    $('#MenuUl a:first').tab('show');
  })

我希望这会有所帮助

于 2012-09-03T03:47:22.173 回答
0

这对我有用。我在 body 和我想被监视的 div 上都添加了 data-spy="scroll" 。删除它解决了这个问题

于 2014-10-07T11:34:05.013 回答
0

有同样的问题。将 bootstrap.min.js 更改为 bootstrap.js

似乎引导程序最小化版本使您的最后一个标识符成为活动页面。

于 2016-03-07T21:43:47.287 回答