目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - Tab插件( Tab Plugin)

Bootstrap - Tab插件( Tab Plugin)

选项卡在Bootstrap Navigation Elements一章中介绍。 通过组合一些数据属性，您可以轻松创建选项卡式界面。 使用此插件，您可以通过选项卡或药丸转换本地内容的窗格，甚至可以通过下拉菜单进行转换。

如果您想单独包含此插件功能，那么您将需要tab.js 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法 (Usage)

您可以通过以下两种方式启用标签 -

  • Via data attributes - 您需要将data-toggle = "tab"或data-toggle = "pill"到锚点。

    将nav和nav-tabs类添加到选项卡ul将应用Bootstrap 选项卡样式 ，而添加nav和nav-pills类将应用pill styling 。 

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

  • Via JavaScript - 您可以使用Javscript启用标签，如下所示 - 

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

  • 以下是激活各个标签的不同方法示例 - 

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show') 
// Select last tab
$('#myTab a:last').tab('show') 
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

淡化效果

要获得选项卡的淡入淡出效果，请将.fade添加到每个.tab-pane 。 第一个选项卡窗格还必须具有.in以正确淡入初始内容 - 

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

例子 (Example)

使用数据属性和淡入淡出效果的选项卡插件示例如以下示例所示 - 

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id = "myTabContent" class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">
      <p>IOWIKI is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and 
         try out different possibilities of the examples.</p>
   </div>
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>
新页面打开

方法 (Methods)

.$().tab - 此方法激活制表符元素和内容容器。 选项卡应具有data-target或针对DOM中容器节点的href 。 

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>
<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>
<script>
   $(function () {
      $('#myTab a:last').tab('show')
   })
</script>

例子 (Example)

以下示例显示了tab插件方法.tab 。 在示例中，第二个选项卡iOS已激活 - 

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>
<div id = "myTabContent" class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">
      <p>IOWIKI is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and try 
         out different possibilities of the examples.</p>
   </div>
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
</div>
<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>
新页面打开

事件 (Events)

下表列出了使用tab插件的事件。 此事件可用于挂钩函数。

事件 描述 例
show.bs.tab 此事件在选项卡显示时触发，但在显示新选项卡之前。 使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。 
$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})
shown.bs.tab 显示选项卡后，此事件将在选项卡显示中触发。 使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。 
$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

例子 (Example)

以下示例显示了tab插件事件的使用。 在示例中，我们将显示当前和以前访问过的标签 - 

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>
<div id = "myTabContent" class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">
      <p>IOWIKI is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and try
         out different possibilities of the examples.</p>
   </div>
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>
<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); 
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text(); 
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>
新页面打开
<上一篇.Bootstrap - Scrollspy插件( Scrollspy Plugin)
Bootstrap - 工具提示插件( Tooltip Plugin).下一篇>
↑回到顶部↑
WIKI教程 @2018