css - Bootstrap：如何使用显示所有部分的选项卡创建可选项卡导航？

Question

我正在使用引导文档中的示例代码。

<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>

我正在尝试通过在导航开头有一个标签为“全部”的标签来重新创建它，并让该标签显示所有部分，但不知道如何去做。

Answer 1

您可以像这样添加“全部”选项卡..

<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。