ブートストラップscrollspyはロード後に最後のナビゲーションリンクボタンを強調表示します

私はトップにナビゲーションバーを5つのリンクで構築しました。ページ内では、要素内の＃タグの後ろにある名前に従って、5つのセクションにidを付け加えました。問題は、最後のナビゲーションリンクボタンがハイライト表示されていることです（最初のナビゲーションバー項目が "アクティブ"に設定されていますが、実行時にアクティブなクラスが追加されています）。私は最新のブートストラップバージョン間違って何V2.0.4 ているのですか？ブートストラップscrollspyはロード後に最後のナビゲーションリンクボタンを強調表示します

は

<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

出典

2012-06-14 Alon

navのhtmlコードとscrolls（）を呼び出すjsをポストしますか？ – Luca

@luca編集されました。私は間違って何をしていますか？ – Alon

奇妙なことに、bodyタグに追加されたデータattrと同じ問題があります。これに対する解決策はありますか？ – davebowker

あなたは<body>タグ（または関連のある他のタグ）にdata-spy="scroll"を追加した？

出典

2012-06-14 13:29:48 Luca

はい、私はそのタグを追加しましたが、読み込み時に最後の要素が有効になっています – Alon

同時に、ブラウザウィンドウにすべてが表示されないように、異なるセクションに十分なコンテンツを追加しようとしましたか？私はあなたが作成したブートストラップページであなたのコードを試しましたが、それは大丈夫と思われます。私は、セクションに多くのテキストを追加して、ブラウザウィンドウに1つしか表示されないようにしました。 – Luca

1つのセクションにportofolioアイテムがある場合は、必ず1つのカテゴリのみを表示するためにfilterを使用しないでください。それは紛争です。 –

これは私に起こっていた、と私は、データ・スパイを持っていました=私がスクロールしようとしていたものの中の余分な要素に「スクロール」する（それは何かから残されていて、そこにあってはならない）。これで問題は解決しました。

出典

2012-09-03 03:27:12

最新のブートストラップのドキュメントは、あなたが経由

を使用するNAVかを選択する（最も典型的にはこれは次のようになり、本体）とdata-target=".navbar"をスパイしたい要素にdata-spy="scroll"を追加

を以下示唆

をデータ属性

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

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

あなたは0でdata-spyセットを持っている場合、私はそれが

出典

2012-09-03 03:47:22 StarWars

ありがとうございました。私はそれをもっとはっきりと読んで、イントロをスキップし、JavaScriptセクションでの使用には早すぎる必要がありました。 – knownasilya

を役に立てば幸い要素の場合は、body要素がheight: 100%;に設定されていないことを確認してください。私の場合はこれが問題でした。

出典

2012-11-15 07:43:59

これは私の問題でした！ありがとう – Kyle

なぜこの答えを受け入れるようにしていませんか？おそらく他の人にも役立ちます。 – wisefish

スティッキーフッターとスクロールバーを使用する方法は？ – markus

これは私のために働いた。私はdata-spy = "scroll"をボディとdivの両方に追加しました。私はスパイしたいと思っていました。それを削除すると、この問題は解決されました。

出典

2014-10-07 11:34:05

この問題は解決しました。 bootstrap.min.jsをbootstrap.jsに変更しました。

は、ブートストラップの最小化バージョンのように見えます。最後の識別子はアクティブなページになります。

出典

2016-03-07 21:43:47

ブートストラップscrollspyはロード後に最後のナビゲーションリンクボタンを強調表示します

答えて

関連する問題