2

詳細を表示ボタンをクリックすると、「tabreveal」IDにページがジャンプするようにしたいと思います。これを実現するには、どのJSが必要ですか? コードは次のとおりです。

  <div class="row">
    <div class="span3 box1">
      <h2>Web</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#web" data-toggle="tab">View details &raquo;</a></p>
    </div>
    <div class="span3 box2">
      <h2>Video</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#video" data-toggle="tab">View details &raquo;</a></p>
   </div>
    <div class="span3 box3">
      <h2>Print</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#print" data-toggle="tab">View details &raquo;</a></p>
    </div>
  </div>
  <div class="tab-content" id="tabreveal">
    <div class="tab-pane" id="web">2</div>
    <div class="tab-pane" id="video">3</div>
    <div class="tab-pane" id="print">4</div>
  </div>

返信ありがとうございます。

4

2 に答える 2

4

タブ データ API は を使用preventDefault()します。これが、ブラウザーがペインにスクロールしない理由です。(ソースコードを参照してください。 )

最も簡単な方法は、Tab コードで定義されているイベント リスナーを無効にしてから、 を呼び出さずに独自のイベント リスナーを作成することpreventDefault()です。

何かのようなもの：

// disable old listener
$('body').off('click.tab.data-api')

// attach new listener
$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  //e.preventDefault()
  $(this).tab('show')
})

preventDefault()特定のタブだけでブラウザーのスクロールをトリガーしたい場合は、ここにいくつかの条件ステートメントを追加して、が呼び出されるかどうかを制御できます。

最後に、これらのオーバーライドがタブ プラグインのロード後に実行されることを確認してください。

ビューポート条件付き

ビューポートを確認し、その幅に基づいてスクロールするかどうかを決定する場合は、次を試してください。

$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  $(window).width() > 767 && e.preventDefault()
  $(this).tab('show')
})

Bootstrap では、767 ピクセルが「電話」ビューポートの上限と見なされますが、好きな値を使用できます。

于 2012-08-21T05:46:57.020 に答える
0

JavaScript コードを使用せずにこのアクションを実行できます。適切な場所にアンカー名を追加するだけで済みます。次に例を示します。

<div class="tab-content" id="tabreveal">
    <a name="web"></a><div class="tab-pane" id="web">2</div>
    <a name="video"></a><div class="tab-pane" id="video">3</div>
    <a name="print"></a><div class="tab-pane" id="print">4</div>
</div>

アンカーを追加すると、リンク ( #web、#video、#print) が適切な場所にジャンプします。

于 2012-08-20T22:53:38.617 に答える