Bootstrap:如何使用显示所有部分的标签创建可标签导航? [英] Bootstrap: How to create a tabbable nav with a tab that displays all the sections?

问题描述

我正在使用引导程序文档中的示例代码.

I'm working with the example code from the bootstrap documentation.

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

我正在尝试通过在导航栏的开头有一个标签为所有"的标签来重新创建此标签，并让该标签显示所有部分，但不确定如何操作.

I'm trying to recreate this with the ability to have a tab at the beginning of the nav labeled "All" and for that tab to show all the sections, but not sure how to go about it.

推荐答案

您可以像这样添加全部"标签.

You could add the "All" tab like this..

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

当单击全部"时，它们会将所有选项卡窗格设置为活动..

And them set all tab-pane to active when 'All' is clicked..

$('#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.

This method also works for Bootstrap 3.

这篇关于Bootstrap:如何使用显示所有部分的标签创建可标签导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！