Bootstrap 5 标签页（Tabs）首项点击跳转顶部问题的解决方案

bootstrap 5 中使用 `data-target` 替代 `href` 会导致首个标签页点击时页面跳至顶部并修改 url 哈希，正确做法是严格遵循官方规范：所有 `nav-link` 必须使用 `href` 属性指向对应 tab-pane 的 id，而非 `data-target`。

在 Bootstrap 5 中，Tab 组件的 JavaScript 行为高度依赖 <a> 标签的 href 属性来定位目标 .tab-pane。虽然早期 Bootstrap 版本或部分文档片段中曾出现 data-target 的用法，但 Bootstrap 5 官方明确要求必须使用 href（参见 Bootstrap 5 Tabs 文档）。当 href 缺失或被 data-target 错误替代时，浏览器会将 <a> 视为无目标链接（即 href="#"），触发默认跳转行为——滚动至页面顶部，并在 URL 后追加 #，这正是你观察到的现象（index.html → index.html#）。

✅ 正确写法（修复后）：

<ul class="nav nav-tabs" id="myTab1">
  <li class="nav-item">
    <a href="#tab11" class="nav-link active text-decoration-none text-dark" data-bs-toggle="tab">Tab1</a>
  </li>
  <li class="nav-item">
    <a href="#tab12" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab2</a>
  </li>
  <li class="nav-item">
    <a href="#tab13" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab3</a>
  </li>
  <li class="nav-item">
    <a href="#tab14" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab4</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab11">Tab 1 content</div>
  <div class="tab-pane fade" id="tab12">Tab 2 content</div>
  <div class="tab-pane fade" id="tab13">Tab 3 content</div>
  <div class="tab-pane fade" id="tab14">Tab 4 content</div>
</div>

⚠️ 注意事项：

Tome

先进的AI智能PPT制作工具

下载

• href 值必须以 # 开头，且与目标 .tab-pane 的 id 完全一致（区分大小写、无空格）；
• 不要同时保留 href 和 data-target，后者在 BS5 中已弃用，可能干扰初始化逻辑；
• 若页面含 Swiper JS，请确保其初始化代码在 Tab 内容显示（.show.active）之后执行，或监听 shown.bs.tab 事件动态初始化（避免对隐藏 pane 初始化失败）；
• 所有 nav-link 必须位于同一 nav 容器内，且 data-bs-toggle="tab" 不可遗漏。

? 验证建议：
打开浏览器开发者工具 → 控制台，点击首个标签页，若不再出现 scrollTo(0,0) 或 URL 变化，则修复成功。也可参考 CodePen 验证示例 对比行为差异。

总结：这不是 Swiper 或多标签共存导致的兼容性问题，而是 Bootstrap 5 的基础使用规范问题。坚持使用 href，即可彻底解决首个标签页异常跳顶问题，并确保所有标签页行为一致可靠。