14

上部に5つのリンクがあるナビゲーションバーを作成しました。ページ自体に、要素の＃タグの後に名前に従ってIDを持つ5つのセクションを追加しました。問題は、最後のナビゲーションリンクボタンが強調表示されることです（コード自体では最初のナビゲーションバーアイテムが「アクティブ」に設定されていますが、実行時に「アクティブ」クラスが最初に追加されました。最新のブートストラップバージョンは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-spy要素に設定がある場合は、要素がに設定されていないbodyことを確認してください。これが私の場合の問題でした。bodyheight: 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 に答える