bootstrap scrollspy 加载后突出显示最后一个导航链接按钮答案

【问题标题】：bootstrap scrollspy highlights last navigation link button after loadingbootstrap scrollspy 加载后突出显示最后一个导航链接按钮
【发布时间】：2012-06-17 10:02:58
【问题描述】：

我在顶部构建了一个带有 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

【问题讨论】：

贴出nav和js调用scrollspy()的html代码？
@luca，已编辑。我做错了什么？
奇怪，我在 body 标签中添加的数据属性也有同样的问题。有什么解决办法吗？
我遇到了同样的问题，我做了一个 jquery 解决方法，只需在页面加载时删除“活动”类并将其再次添加到第一个元素而不是错误的，如下所示：$('.后索引 li.active').removeClass('active'); $('.post-index li:first-child').addClass('active');

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

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

【讨论】：

这是我的问题！谢谢
那么如何使用粘性页脚和滚动间谍？

【解决方案2】：

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

【讨论】：

是的，我已经添加了那个标签，但是最后一个元素仍然在加载时被激活
您是否尝试过向不同部分添加足够的内容，以使它们不会同时出现在您的浏览器窗口中？我已经在我构建的引导页面中尝试了您的代码，并且似乎一切正常。我只是在这些部分中添加了很多文本，以确保我的浏览器窗口中一次只显示一个。
如果您在某个部分有投资组合项目，请确保您不要使用过滤器来仅显示一个类别。这是一场冲突。

【解决方案3】：

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

【讨论】：

谢谢！这是我的问题，它让我发疯。 :)

【解决方案4】：

最新的引导文档建议如下

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

通过数据属性

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

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

希望对你有帮助

【讨论】：

谢谢你，这对我有帮助。我应该更清楚地阅读它，跳过介绍并快速进入使用 JavaScript 部分。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：