W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap JS 标签



JS 标签 (tab.js)

标签用于将内容分为每个窗格所在的不同窗格 每次可查看一个。

有关Tabs的教程,请阅读我们的 Bootstrap Tabs/Pills教程


Tab插件类

描述 实例
.nav nav-tabs 创建导航标签 测 试
.nav-justified 使导航标签/胶囊等于其父母在屏幕上的宽度 宽于768像素。在较小的屏幕上,导航选项卡是堆叠的 测 试
.tab-content 与.tab-pane和data-toggle =“tab”一起,它使标签可以切换 测 试
.tab-pane 与.tab-content和data-toggle =“tab”一起使用 标签可切换 测 试

通过 data-*属性 触发

向每个标签添加 data-toggle="tab" ,然后为每个标签添加一个具有唯一ID的 .tab-pane 类,并将其包装在 .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')
测 试

选项

None

方法

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

方法 描述 实例
.tab("show") 显示标签 测 试

事件

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

事件 描述 实例
show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前。 测 试
shown.bs.tab 该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。 测 试
hide.bs.tab 在选项卡即将被隐藏时发生 测 试
hidden.bs.tab 当标签完全隐藏时发生(CSS转换后 完成) 测 试

提示: 使用jQuery的 event.targetevent.relatedTarget 获取活动标签页和上一个活动标签页:

Example

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