Bootstrap 5.0锚点链接切换标签页问题求助

你的代码存在几个关键问题导致切换功能失效，修正后即可正常工作：

问题分析 #

• 标签导航（ul#pills-tab）位置错误：Bootstrap标签组件需要先加载导航元素，才能正确绑定切换逻辑，你把导航放在了内容面板之后，导致JS无法正常识别关联关系
• 重复的active状态：#home和#build两个标签面板同时设置了show active类，初始状态混乱，干扰切换逻辑
• 属性不匹配：内部链接使用了data-bs-toggle="tab"，但你的标签类型是pill，虽然Bootstrap兼容，但统一用data-bs-toggle="pill"更规范

修正后的完整代码 #

<!-- 标签导航需放在内容面板之前 -->
<ul class="info-navigation" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Start</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">2</button>
  </li>
</ul>

<div class="tab-content" id="tabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="pills-home-tab">
    CONTENT FOR HOME
  </div>
  <div class="tab-pane fade" id="onboard" role="tabpanel" aria-labelledby="pills-onboard-tab">
    <a href="#build" data-bs-toggle="pill" data-bs-target="#build">Show Build tab</a>
  </div>
  <div class="tab-pane fade" id="build" role="tabpanel" aria-labelledby="pills-build-tab">
    CONTENT FOR BUILD
  </div>
</div>

关键修改说明 #

1. 调整导航与内容面板的顺序，确保Bootstrap JS能正确关联导航按钮和对应标签面板
2. 移除#build面板的show active类，仅保留#home的初始激活状态
3. 给每个tab-pane添加role="tabpanel"和aria-labelledby属性，符合无障碍访问规范
4. 将内部链接的data-bs-toggle改为pill，与标签类型统一，确保切换逻辑正常触发

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