Bootstrap标签页无法切换求助：HTML新手构建报告时的技术故障

以下是几个常见问题及对应修复方法，你可以对照自己的代码逐一排查：

• 核对data-bs-target与内容容器id的一致性
  Bootstrap 5的标签切换依赖标签按钮的data-bs-target属性和对应内容容器的id完全匹配，包括大小写和拼写。示例正确结构：

  <!-- 标签按钮 -->
  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#executive-summary">Executive summary</button>
  
  <!-- 对应内容容器 -->
  <div class="tab-pane active" id="executive-summary">
    这里是Executive summary的内容
  </div>
  

• 确保引入Bootstrap JavaScript文件
  标签页的交互逻辑需要Bootstrap JS支持，必须在页面末尾（</body>标签前）引入：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

  注意：Bootstrap 5不再依赖jQuery，直接引入官方提供的bundle包即可。

• 检查内容容器的类名结构
  所有标签内容容器必须包裹在带有tab-content类的父容器中，且每个内容容器需要添加tab-pane类，默认显示的容器额外加active类：

  <div class="tab-content">
    <div class="tab-pane active" id="executive-summary">Executive summary内容...</div>
    <div class="tab-pane" id="test-summary">Test summary内容...</div>
  </div>
  

• 验证标签按钮的层级结构
  标签按钮需要放在带有nav nav-tabs类的容器内，确保结构符合Bootstrap规范：

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#executive-summary">Executive summary</button>
    </li>
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#test-summary">Test summary</button>
    </li>
  </ul>
  

内容的提问来源于stack exchange，提问作者ArrchanaMohan