Bootstrap 3：选项卡：如何创建一个显示所有内容的“全部”选项卡？

Question

我正在使用 Bootstrap 3，我想添加一个“全部”选项卡，该选项卡将显示所有其他单个选项卡的内容。我总共有 3 个标签。“正在进行”：显示正在进行的项目。“已完成”：显示已完成的项目。“翻新”：显示翻新的项目。现在，我正在尝试添加一个“全部”选项卡来显示所有项目。

我们已经在 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');
});

小提琴