Bootstrap 3：标签：如何创建一个显示所有内容的'all'标签？

Question

我正在使用 Bootstrap 3，我想添加一个 'all' 选项卡来显示所有其他单独选项卡的内容。我总共有 3 个选项卡。 'Ongoing'：显示正在进行的项目。 'Completed': 显示已完成的项目。 'Renovated': 展示装修项目。现在，我正在尝试添加一个 'All' 选项卡来显示所有项目。

我们已经 an answer for the same to achieve in Bootstrap 2。但它似乎不适用于 Bootstrap 3. 请检查上面链接答案中 bootply 的输出。这正是我想要实现的目标。

Answer 1

 <ul class="nav nav-tabs" role="tablist">
      <li><a id="tabAll" href="#">All</a></li>
      <li class="active">
          <a href="#on" role="tab" data-toggle="tab">
            Ongoing
          </a>
      </li>
       <li>
          <a href="#com" role="tab" data-toggle="tab">
              Completed
          </a>
      </li>
       <li>
          <a href="#ren" role="tab" data-toggle="tab">
               Renovated
          </a>
      </li>
</ul>

<div class="tab-content">
      <div class="tab-pane fade active in" id="on">
          <h2>Ongoing</h2>

      </div>
     <div class="tab-pane fade" id="com">
          <h2>Completed</h2>

      </div>
     <div class="tab-pane fade" id="ren">
          <h2>Renovated</h2>

      </div>
</div>

$('#tabAll').on('click',function(){
  $('#tabAll').parent().addClass('active');  
  $('.tab-pane').addClass('active in');  
  $('[data-toggle="tab"]').parent().removeClass('active');
});

Fiddle

Answer 2

您可以在此处使用此示例：https://www.bootply.com/60331
js代码：

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

HTML:

<div class="tabbable" id="myTabs">
  <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>
  <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 class="tab-pane" id="tab3">
      <p>Howdy, I'm in Section 3.</p>
    </div>
  </div>
</div>

Bootstrap 3：标签：如何创建一个显示所有内容的'all'标签？

Bootstrap 3: Tabs: How to create an 'all' tab that shows all content?

tabs

twitter-bootstrap