bootstrap_ref_js_tab

Bootstrap 5 JavaScript Tab (标签页) 参考

JS Tab (标签页插件)

Tabs (标签页) 是一个强大的组件，用于将内容组织到不同的面板中，每个面板一次只能查看一个。Bootstrap 5 使用原生 JavaScript 插件来实现此功能。

有关创建和使用 Tabs 的详细指南，请参阅 Bootstrap 5 Tabs 的教程。

Tab (标签页) 插件的类和属性

类 / 属性	描述	注意
.nav, .nav-tabs	标签页导航的容器。`.nav-tabs` 提供了默认的 Bootstrap 标签页样式。	见下方示例
.nav-link	应用于 `.nav` 容器内的标签页触发元素 ( 或	见下方示例
.active	表示当前活动的标签页触发器和标签页面板。	见下方示例
.tab-content	所有标签页面板的包裹容器。	见下方示例
.tab-pane	定义单个内容面板。配合 ID 使用。	见下方示例
.fade	在切换标签页时添加淡入淡出过渡效果。	见下方示例
.show	使一个 `.fade` 标签页面板可见（与 `.active` 一起使用）。	见下方示例
data-bs-toggle=“tab”	添加到标签页触发元素 ( 或	见下方示例
data-bs-target=“#paneID”	标签页触发器上的属性，指向相应的 `.tab-pane` 的 `id`。	见下方示例

通过 data-bs-* 属性（推荐）

实现标签页最简单的方式是在每个标签页触发器上使用 data-bs-toggle="tab"，并使用 data-bs-target 指向每个标签页面板的唯一 ID。将标签页面板包裹在 .tab-content 容器中。确保您的项目中包含了 Bootstrap 的 JavaScript 文件。

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="menu1-tab" data-bs-toggle="tab" data-bs-target="#menu1" type="button" role="tab" aria-controls="menu1" aria-selected="false">Menu 1</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <h3>HOME</h3>
    <p>Some content in the Home tab.</p>
  </div>
  <div class="tab-pane fade" id="menu1" role="tabpanel" aria-labelledby="menu1-tab">
    <h3>Menu 1</h3>
    <p>Some content in Menu 1.</p>
  </div>
</div>

注意：上面示例使用 <button> 元素作为标签页触发器，当不需要导航到新页面时，这对于可访问性来说是推荐的做法。您也可以使用 <a> 元素。

通过 JavaScript

您也可以使用 Bootstrap 的 Tab JavaScript API 通过程序控制标签页：

// 使用 JavaScript 初始化或显示一个标签页

// 示例：按其 ID 选择一个标签页并显示它
const menu1TabTrigger = document.querySelector('#menu1-tab');
if (menu1TabTrigger) {
  const tab = bootstrap.Tab.getOrCreateInstance(menu1TabTrigger);
  tab.show();
}

// 示例：显示标签页列表中的第一个标签页
const firstTabTrigger = document.querySelector('#myTab .nav-link:first-child');
if (firstTabTrigger) {
  const tab = bootstrap.Tab.getOrCreateInstance(firstTabTrigger);
  tab.show();
}

// 示例：手动触发点击事件显示标签页（如果未使用 data-bs-toggle）
// 这通常由 data-bs-toggle="tab" 自动处理
document.querySelectorAll('.custom-tab-trigger').forEach(triggerEl => {
  triggerEl.addEventListener('click', function (event) {
    event.preventDefault();
    const tab = bootstrap.Tab.getOrCreateInstance(this);
    tab.show();
  });
});

Tab (标签页) 选项

Tab 插件没有通过 JavaScript 构造函数传递的特定选项。其行为主要通过 HTML data 属性（如 data-bs-target）和 JavaScript 方法来控制。

Tab (标签页) 方法

下表列出了可用的 Tab 实例方法。

方法描述

myTab.show() 激活标签页及其关联的内容面板。在标签页面板实际显示之前（即 shown.bs.tab 事件发生之前）返回调用方。

myTab.dispose() 销毁元素的 tab 实例，移除事件监听器和数据。

bootstrap.Tab.getInstance(element) 获取与 DOM 元素关联的 tab 实例的静态方法。

bootstrap.Tab.getOrCreateInstance(element) 获取 DOM 元素的 tab 实例的静态方法，如果未初始化则创建一个新的。

Tab (标签页) 事件

Bootstrap 的标签页插件包含用于挂钩标签页功能的事件。

事件描述

show.bs.tab 此事件在标签页显示时触发，但在新标签页显示之前。

shown.bs.tab 此事件在标签页显示后触发。使用 event.target 获取新激活的标签页，使用 event.relatedTarget 获取上一个激活的标签页。

hide.bs.tab 当要显示一个新标签页时触发此事件（因此上一个活动的标签页将被隐藏）。

hidden.bs.tab 此事件在标签页隐藏后（并且新标签页显示后）触发。使用 event.target 获取当前隐藏的标签页，使用 event.relatedTarget 获取新激活的标签页。

使用标签页事件的示例：