Question

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

我们已经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：标签：如何创建显示所有内容的“全部”标签？

2 个答案: