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，如下例所示：

示例

Try this code »

<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-bs-toggle="tab" 或在每个胶囊上指定 data-bs-toggle="pill"，并为每个选项卡创建一个具有唯一 ID 的 .tab-pane 并将它们包装在 .tab-content 中。

让我们看一个例子来了解如何通过数据属性创建动态选项卡。

示例

Try this code »

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
        <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#messages" class="nav-link" data-bs-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>

提示： .fade 类被添加到每个 .tab-pane 以使选项卡在显示新选项卡内容的同时淡入。此外，您必须将 .active 类添加到 .nav-link，并将 .show 和 .active 类添加到相应的 .tab-pane 以使其最初可见。

通过 JavaScript 创建动态选项卡

您也可以通过 JavaScript 启用选项卡。每个选项卡都需要单独激活。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var tabList = [].slice.call(document.querySelectorAll("#myTab a"));
    tabList.forEach(function(tab){
        var tabTrigger = new bootstrap.Tab(tab);

        tab.addEventListener("click", function(event){
            event.preventDefault();
            tabTrigger.show();
        });
    });
});
</script>

您可以通过多种方式激活各个选项卡。让我们看一下下面的例子：

示例

jQuery JavaScript

Try this code »

$('#myTab a[href="#profile"]').tab("show"); // 显示选择器所针对的选项卡
$("#myTab a:first").tab("show"); // 显示第一个选项卡
$("#myTab a:last").tab("show"); // 显示最后一个选项卡
$("#myTab li:eq(1) a").tab("show"); // 显示第二个选项卡（0-indexed，像一个数组）

// 显示选择器所针对的选项卡
var profileTabElement = document.querySelector('#myTab a[href="#profile"]');
var profileTab = new bootstrap.Tab(profileTabElement);
profileTab.show();

// 显示第一个选项卡
var firstTabElement = document.querySelector("#myTab li:first-child a");
var firstTab = new bootstrap.Tab(firstTabElement);
firstTab.show();

// 显示最后一个选项卡
var lastTabElement = document.querySelector("#myTab li:last-child a");
var lastTab = new bootstrap.Tab(lastTabElement);
lastTab.show();

// 显示第二个选项卡（0-indexed，像一个数组）；
var secondTabElement = document.querySelectorAll("#myTab li")[1].firstElementChild;
var secondTab = new bootstrap.Tab(secondTabElement);
secondTab.show();

方法

这是标准Bootstrap程序的选项卡方法：

show

激活给定的选项卡并显示其关联的窗格。之前选择的任何其他选项卡都将被取消选择，并且其关联的窗格被隐藏。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myTab a:last").tab("show"); // 显示最后一个选项卡
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    // 显示最后一个选项卡
    var lastTabElement = document.querySelector("#myTab li:last-child a");
    var lastTab = new bootstrap.Tab(lastTabElement);
    lastTab.show();
});
</script>

dispose

此方法破坏元素的选项卡（即删除 DOM 元素上存储的数据）。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:last")[0]);
        console.log(lastTab);
        // {_element: a.nav-link}

        $("#myTab a:last").tab("dispose");
        console.log(lastTab);
        // {_element: null}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:last-child a");

    btn.addEventListener("click", function(){
        var lastTab = bootstrap.Tab.getInstance(element);
        console.log(lastTab);
        // {_element: a.nav-link}

        lastTab.dispose();
        console.log(lastTab);
        // {_element: null}
    });
});
</script>

getInstance

这是一个静态方法，允许您获取与 DOM 元素关联的选项卡实例。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    // 获取按钮单击时的选项卡实例
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:first-child a");

    // 获取按钮单击时的选项卡实例
    btn.addEventListener("click", function(){
        var firstTab = bootstrap.Tab.getInstance(element);
        console.log(firstTab);
        // {_element: a.nav-link.active}
    });
});
</script>

getOrCreateInstance

这是一种静态方法，允许您获取与 DOM 元素关联的选项卡实例，或者在选项卡未初始化的情况下创建一个新实例。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    // 在按钮单击时获取或创建选项卡实例
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getOrCreateInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:first-child a");

    // 在按钮单击时获取或创建选项卡实例
    btn.addEventListener("click", function(){
        var firstTab = bootstrap.Tab.getOrCreateInstance(element);
        console.log(firstTab);
        // {_element: a.nav-link.active}
    });
});
</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` 分别定位上一个活动选项卡和新活动选项卡。

以下示例在完全完成选项卡转换时向用户显示活动选项卡和上一个选项卡的名称。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
        console.log(e.target); // 新激活的选项卡
        console.log(e.relatedTarget); // 上一个活动选项卡
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var tabList = [].slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'));
    tabList.forEach(function(tab){
        tab.addEventListener("shown.bs.tab", function(e){
            console.log(e.target); // 新激活的选项卡
            console.log(e.relatedTarget); // 上一个活动选项卡
        });
    });
});
</script>

Bootstrap 选项卡

使用 Bootstrap 创建选项卡

示例

示例

通过数据属性创建动态选项卡

示例

通过 JavaScript 创建动态选项卡

示例

示例

方法

show

示例

dispose

示例

getInstance

示例

getOrCreateInstance

示例

事件

示例

关于我们

联系方式

互动工具