Bootstrap 选项卡
在本教程中，您将学习如何使用 Bootstrap 选项卡插件创建动态选项卡以在内容之间切换。
使用 Bootstrap 创建选项卡
基于选项卡的导航提供了一种简单而强大的机制，通过将内容分隔到不同的窗格中来处理小区域内的大量内容，每次可以查看每个窗格。 用户无需离开页面即可通过窗格之间的切换快速访问内容。 以下示例将向您展示如何使用 Bootstrap 选项卡组件创建基本选项卡。
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>— 上面示例的输出将如下所示：
选项卡插件也适用于胶囊导航。 要创建胶囊导航，只需在选项卡标记中将类 .nav-tabs 替换为 .nav-pills，如下例所示：
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>— 上面示例的输出将如下所示：
通过数据属性创建动态选项卡
您无需编写任何 JavaScript 即可激活选项卡组件 — 只需在每个选项卡上指定 data-toggle="tab"，并为每个选项卡创建一个具有唯一 ID 的 .tab-pane 并将它们包装在.tab-content中。 以下示例将向您展示如何通过 Bootstrap 中的数据属性创建基本的可选项卡。
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-toggle="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-toggle="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content ...</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content ...</p>
</div>
<div class="tab-pane fade" id="messages">
<p>Messages tab content ...</p>
</div>
</div>通过 JavaScript 创建动态选项卡
您也可以通过 JavaScript 启用选项卡。 每个选项卡都需要单独激活。
<script>
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>您可以通过多种方式激活各个选项卡：
$('#myTab a[href="#profile"]').tab('show'); // 显示选择器所针对的选项卡
$("#myTab a:first").tab('show'); // 显示第一个选项卡
$("#myTab a:last").tab('show'); // 显示最后一个选项卡
$("#myTab li:eq(2) a").tab('show'); // 显示第三个选项卡（0 索引，如数组）方法
这是标准 Bootstrap 程序的选项卡方法：
$().tab('show')
激活选项卡元素和相关的内容容器。 选项卡应该有一个 data-target 或一个 href 用于定位 DOM 中的容器节点。
<script>
$(document).ready(function(){
$("#myTab li:eq(1) a").tab('show');
})
</script>事件
这些是增强选项卡功能的标准 Bootstrap 事件。
| 事件 | 说明 |
|---|---|
| show.bs.tab | 此事件在选项卡显示时触发，但在新选项卡显示之前。 您可以使用 event.target 和 event.relatedTarget 分别定位活动选项卡和上一个活动选项卡（如果可用）。 |
| shown.bs.tab | 这个事件在选项卡页显示后触发。 您可以使用 event.target 和 event.relatedTarget 分别定位活动选项卡和上一个活动选项卡（如果可用）。 |
| hide.bs.tab | 当要隐藏当前活动选项卡并因此显示新选项卡时会触发此事件。 您可以使用 event.target 和 event.relatedTarget 分别定位当前活动选项卡和即将激活的新选项卡。 |
| hidden.bs.tab | 在隐藏前一个活动选项卡并显示新选项卡后触发此事件。 您可以使用 event.target 和 event.relatedTarget 分别定位上一个活动选项卡和新活动选项卡。 |
以下示例在选项卡转换完全完成时向用户显示活动选项卡和上一个选项卡的名称。
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
e.target // 活动选项卡
e.relatedTarget // 上一个选项卡
})
});
</script>Advertisements