12

Twitter Bootstrap Affix JS コンポーネントを使用しています。ページを下にスクロールすると、UL リストが正しく表示されます。また、個々のリスト項目をクリックすると (Twitter がドキュメント ページで行うのと同じように)、ドキュメント内のアンカー ID までスクロールダウンしますが、LI 要素は Twitter の「アクティブ」クラスを受け取りません。ドキュメントをスクロールしても、「アクティブ」クラスは取得されません。

ドキュメント内の特定の部分にスクロールすると、適切なリンクがアクティブになると予想されますが (scroll-spy のように)、これを機能させることはできません。

必要に応じて Bootstrap が「アクティブ」クラスを追加するように設定する必要がある特別なものはありますか?

4

1 に答える 1

29

はい、ScrollSpyプラグインも使用する必要があります。マークアップまたはJSを介してアクティブ化できます。スクロールイベント#scroll-paneをトリガーする要素であり#navbar、を含む要素であるとするul.navと、次のように機能するはずです。

HTML

<div id="scroll-pane" data-spy="scroll" data-target="#navbar">

JS

$('#scroll-pane').scrollspy({target: '#navbar'});

HTMLまたはJSのいずれかを使用しますが、両方を使用することはできません。

追加情報

ScrollSpyプラグインにターゲットが渡されると、のようscrollspy({target: '#navbar'})に、これはフォームのセレクターを構築するために使用されます

target + ' .nav li > a'

これは、この例では

'#navbar .nav li > a'

このセレクターが作成する規定を理解することが重要です。

  1. オリジナルは、クラスを持つ要素を含むtarget要素である必要があります。したがって、おそらく決してあなたのターゲットになるべきではありません。nav.nav
  2. .nav要素にはリストアイテムが含まれている必要があります。
  3. これらのリストアイテムには<a>、直接の子としてが必要です。

これによって選択された要素は、または「＃」で始まる<a>要素によって除外されます。これらは、ScrollSpyプラグインが接続されている要素に含まれる要素を選択するために使用されます。選択されたもののオフセットが保存され、スクロールが発生すると、現在のスクロールオフセットが保存された値と比較され、対応する要素がクラスで更新されます。data-targethrefhref<a>active

うまくいけば、この要約は、コードをさらに詳細に掘り下げることなく、プラグインを実装しようとしたときに何がつまずく可能性があるかをよりよく理解するのに役立つでしょう。

于 2012-08-25T20:36:58.383 に答える