Bootstrap scrollspy выделяет последнюю кнопку ссылки навигации после загрузки

Я построил панель навигации вверху с 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

Ответы

Ответ 1

Вы добавили data-spy="scroll" в тег <body> (или любой другой тег, который имеет значение)?

Ответ 2

Если у вас установлен data-spy в элементе body, убедитесь, что элемент body не установлен в height: 100%;. Это была проблема в моем случае.

Ответ 3

Это происходило со мной, и у меня был data-spy = "scroll" на дополнительном элементе внутри того, которое я пытался прокрутить (он был оставлен от чего-то, не должен был быть там). Удаление этого исправлено.

Ответ 4

В последней документации для начальной загрузки предлагается следующее

добавьте data-spy="scroll" к элементу, который вы хотите отслеживать (обычно это будет тело) и data-target=".navbar", чтобы выбрать, какой nav использовать

Через атрибуты данных

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

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

Я надеюсь, что это поможет

Ответ 5

Это сработало для меня. Я добавил data-spy = "scroll" как на теле, так и на div, на котором я хотел, чтобы меня шпионили. Удаление этой проблемы решило эту проблему.

Ответ 6

имела такую ​​же проблему. Изменен bootstrap.min.js на bootstrap.js

похоже на версию с минимальной версией бутстрапа, делает ваш последний идентификатор активной страницей.