3

次のように Bootstrap を使用して、タブ付き要素内にいくつかのコンテンツがあります。

<div class="tab-content"> 
   <div class="tab-pane active" id="website-information">
      ...
   </div> 
   <div class="tab-pane" id="personal-information"> 
      ...
   </div> 
   <div class="tab-pane" id="payment-information"> 
      ...
   </div> 
</div>

そして、この後、次のようなページネーション要素がいくつかあります。

<ul class="pager">
   <li class="previous"><a href="#website-information" data-toggle="tab">Previous</a></li>
   <li class="next"><a href="#owner-information" data-toggle="tab">Next</a></li>
</ul>

ご覧のとおり、ページネーション ボタンは、それぞれタブを戻したり、タブを進めたりすることになっていますが、現在は、タブが 2 つしかない場合でも問題なく動作する特定のタブを指しているだけですが、約 4 つある可能性があります。私が完了するまでに。前のボタンと次のボタンを実際にタブで機能させる明白で簡単な方法があると確信していますが、それを理解することはできません。ヘルプや提案をいただければ幸いです。

これは、以前にアクティブだったタブ要素と次のタブを選択する際にブートストラップが提供するものです。しかし、それらを機能させる方法がわかりません：

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})
4

2 に答える 2

0

ここで、ブートストラップ タブを使用してページネーションを追加する方法のわかりやすい例を見つけました: http://www.bootply.com/60206

お役に立てれば！

于 2014-03-07T00:48:36.207 に答える