本文详解 Bootstrap 5 选项卡组件的 HTML 结构、关键属性变更（如 data-toggle → data-bs-toggle）、必需的 JavaScript 依赖，以及 tab-pane 类名更新（fade in active → fade show active），帮助开发者快速完成从 v4 到 v5 的平滑迁移。
本文详解 bootstrap 5 选项卡组件的 html 结构、关键属性变更（如 `data-toggle` → `data-bs-toggle`）、必需的 javascript 依赖，以及 `tab-pane` 类名更新（`fade in active` → `fade show active`），帮助开发者快速完成从 v4 到 v5 的平滑迁移。
Bootstrap 5 对组件的 JavaScript 初始化方式和数据属性进行了标准化重构，其中选项卡（Tabs）是最常遇到兼容性问题的组件之一。与 Bootstrap 4 相比，主要变化有三点：
✅ *1. 数据属性前缀统一为 `data-bs-** 旧版中使用的data-toggle="tab"在 Bootstrap 5 中必须改为data-bs-toggle="tab"`。这是全局性变更——所有交互式组件（如 modal、collapse、tooltip）均遵循此规则。
✅ 2. tab-pane 类名更新
激活态面板需同时包含 fade、show 和 active 三个类：
- ❌ 错误写法：class="tab-pane fade in active"（v4 风格，in 已废弃）
- ✅ 正确写法：class="tab-pane fade show active"
show 类替代了 v4 中的 in，用于触发动画显示；fade 仍控制淡入过渡效果（若无需动画，可省略 fade 和 show，仅保留 active）。
✅ 3. 必须引入 Bootstrap JS（推荐 bundle 版本）
Bootstrap 5 完全移除了 jQuery 依赖，其 JavaScript 组件需通过原生 ES6 模块运行。因此：
- 不再加载 jQuery；
- 必须引入 bootstrap.bundle.min.js（含 Popper，无需额外引入）；
- 脚本需在 DOM 加载后执行（通常置于 </body> 前，或使用 DOMContentLoaded 事件）。
以下是完整、可直接运行的 Bootstrap 5 选项卡示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<title>Bootstrap 5 Tabs</title>
</head>
<body>
<div class="container mt-4">
<h3>Bootstrap 5 Tabs</h3>
<!-- 导航标签栏 -->
<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="help-tab" data-bs-toggle="tab" data-bs-target="#help"
type="button" role="tab" aria-controls="help" aria-selected="false">Help</button>
</li>
</ul>
<!-- 内容区域 -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h5>Home Content</h5>
<p>This is the active tab panel with Bootstrap 5 classes.</p>
</div>
<div class="tab-pane fade" id="help" role="tabpanel" aria-labelledby="help-tab">
<h5>Help Content</h5>
<p>Switch tabs using native Bootstrap 5 JavaScript — no jQuery required.</p>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>? 注意事项与最佳实践：
- 使用 <button> 替代 <a> 标签作为导航项更符合语义化（尤其当无真实跳转需求时），并需添加 role="tab"、aria-controls、aria-selected 等 WAI-ARIA 属性以保障无障碍访问；
- 若仍需 <a> 标签，请确保 href 指向对应 tab-pane 的 id（如 href="#home"），且 data-bs-target 保持一致；
- 不要手动调用 JavaScript 初始化（如 new bootstrap.Tab(...)），Bootstrap 5 会自动为带 data-bs-toggle="tab" 的元素绑定事件；
- 自定义样式时，避免覆盖 .tab-pane.fade.show 的 display: block，否则会导致内容不可见。
迁移完成后，选项卡将正常响应点击、支持键盘导航（Tab/Arrow 键）、具备平滑淡入动画，并完全符合 Bootstrap 5 的设计规范与可访问性标准。
