Tabs 标签页

选项卡切换组件。

代码演示

基本

添加 .nav-tabs 类来生成选项卡，.active 类用于设置当前活动链接。.disabled 类用于禁用链接

pills

.nav-pills 类用于生成 pills 选项卡

下划线

.nav-underline 类用于生成下划线选项卡

自动填充

.nav-fill 类用于生成填充选项卡，项目的宽度会根据内容自动调整，以填充整个容器。项也可以使用 a 标签来实现。

等宽填充

.nav-justified 类用于生成等宽选项卡，项的宽度会根据内容自动调整，以填充整个容器。

响应式

如果你需要响应式导航变化，请使用flexbox实用程序。在下面的示例中，我们的导航将堆叠在最低的断点上，然后适应水平布局，从小断点开始填充可用宽度。

带下拉选项卡

带下拉pills

交互

选项卡

通过引入bootstrap.js 来启用选项卡交互。请注意，如果你使用 nav 标签，则不应将 role="tablist" 直接添加到其中，因为这会覆盖该元素作为导航地标的原生角色。

pills

垂直

对于垂直选项卡，你还应该将 aria-orientation="vertical" 添加到选项卡列表容器中

使用数据属性

你只需在元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill" 即可激活选项卡或平板导航，无需编写任何 JavaScript。在 .nav-tabs 或 .nav-pills 上使用这些数据属性

通过Javascript

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

你可以通过多种方式激活各个选项卡：

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

淡入淡出

要使选项卡淡入，请将 .fade 添加到每个 .tab-pane。第一个选项卡窗格还必须具有 .show 以使初始内容可见。

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

API

方法

方法名	描述
`dispose`	销毁元素的选项卡
`getInstance`	静态方法允许您获取与 `DOM` 元素关联的选项卡实例，您可以像这样使用它：`bootstrap.Tab.getInstance(element)`。
`getOrCreateInstance`	静态方法返回与 `DOM` 元素关联的选项卡实例，如果未初始化则创建一个新实例。您可以像这样使用它：`bootstrap.Tab.getOrCreateInstance(element)`。
`show`	选择给定的选项卡并显示其关联窗格。之前选择的任何其他选项卡将变为未选择状态，并且其关联窗格将被隐藏。在实际显示选项卡窗格之前（即在`shown.bs.tab`事件发生之前）返回给调用者。

事件

显示新选项卡时，事件按以下顺序触发：

hide.bs.tab（在当前活动选项卡上）
show.bs.tab（在要显示的选项卡上）
hidden.bs.tab（在上一个活动选项卡上，与 hide.bs.tab 事件相同）
shown.bs.tab（在刚刚显示的新活动选项卡上，与 show.bs.tab 事件相同）

如果没有任何选项卡处于活动状态，则不会触发 hide.bs.tab 和 hidden.bs.tab 事件。

时间类型	描述
`hide.bs.tab`	当要显示新选项卡（因此要隐藏前一个活动选项卡）时，将触发此事件。分别使用·event.target·和·event.relatedTarget·定位当前活动选项卡和即将活动的新选项卡。
`hidden.bs.tab`	此事件在新选项卡显示后触发（因此前一个活动选项卡被隐藏）。分别使用`event.target`和`event.relatedTarget`定位前一个活动选项卡和新活动选项卡。
`show.bs.tab`	此事件在标签页显示时触发，但在新标签页显示之前。使用`event.target`和`event.relatedTarget`分别定位活动标签页和上一个活动标签页（如果可用）。
`shown.bs.tab`	此事件在标签显示后触发。使用`event.target`和`event.relatedTarget`分别定位活动标签和上一个活动标签（如果可用）。

示例

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})