Bootstrap JS Tab 插件

JS Tab (tab.js)

Tabs 选项卡用于将内容分隔为不同的窗格，每个窗格一次只能查看一个。

学习更多的 Tab 知识, 可以访问本站的 Bootstrap 选项卡/胶囊式菜单教程。

Tab 插件类

通过 data-* 属性

向每个选项卡添加 data-toggle="tab"，然后添加一个 .tab-pane 类，每个选项卡都有一个唯一的 ID，并将它们包装在 .tab-content 类中。

实例

<ul class="nav nav-tabs">
 <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
 <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
 <div id="home" class="tab-pane fade in active">
  <h3>HOME</h3>
  <p>Some content.</p>
 </div>
 <div id="menu1" class="tab-pane fade">
  <h3>Menu 1</h3>
  <p>Some content in menu 1.</p>
 </div>
</div>

通过 JavaScript

手动:

实例

// Select all tabs
$('.nav-tabs a').click(function(){
 $(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

Tab Options

Tab 方法

下表列出了所有可用的 Tab 方法。

Tab 事件

下表列出了所有可用的 Tab 事件。

提示：使用 jQuery 的和获取活动选项卡和上一个活动选项卡:

实例

$('.nav-tabs a').on('shown.bs.tab', function(event){
 var x = $(event.target).text();     // active tab
 var y = $(event.relatedTarget).text(); // previous tab
});