0

ブートストラップ ドキュメントのサンプル コードを使用しています。

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

ナビゲーションの先頭に「すべて」というラベルの付いたタブを作成し、そのタブにすべてのセクションを表示する機能を使用して、これを再作成しようとしていますが、どうすればよいかわかりません。

4

1 に答える 1

4

このように「すべて」タブを追加できます。

<ul class="nav nav-tabs">
    <li><a id="tabAll">All</a></li>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>

そして、「すべて」をクリックすると、すべてのタブペインがアクティブに設定されます..

$('#tabAll').click(function(){
  $('#tabAll a').addClass('active');  
  $('.tab-pane').each(function(i,t){
    $('#myTabs li').removeClass('active'); 
    $(this).addClass('active');  
  });
});

例: http://bootply.com/60331

この方法は、Bootstrap 3 でも機能します。

于 2013-04-30T14:33:02.163 に答える