Question

我在顶部建了一个导航栏，有5个链接。在页面本身，我根据元素中＃标签后面的名称添加了5个带id的部分。问题是最后一个导航链接按钮被突出显示（虽然在代码本身中第一个导航栏项设置为“活动”，但在运行时在开始时将“活动”类添加到它中。我有最新的bootstrap版本，即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

Answer 1

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

Answer 2

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

Answer 3

这只是发生在我身上，我在我试图滚动的一个额外元素上有数据间谍=“滚动”（它是从某些东西遗留下来的，不应该在那里）。删除此问题解决了这个问题。

Answer 4

最新的bootstrap文档建议遵循

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

通过数据属性

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

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

我希望有帮助

Answer 5

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

Answer 6

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

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

bootstrap scrollspy在加载后突出显示上一个导航链接按钮

6 个答案: