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

在 Bootstrap 5 的 Tabs 组件中，href 属性不仅是可选的，而是必需的触发机制。虽然文档中提到 data-bs-toggle="tab" 是核心行为标识，但 Bootstrap 内部依赖 href 的值（如 #tab11）来精准定位目标 .tab-pane 并阻止默认锚点跳转行为。当你错误地使用 data-target（这是 Bootstrap 4 的旧写法，且在 BS5 中已被弃用），JavaScript 初始化时无法正确绑定事件处理器——尤其是对第一个 元素，它会退回到原生 行为：触发页面滚动至顶部，并将 # 追加到 URL。

✅ 正确写法（符合 Bootstrap 5 官方规范）：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

<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>

⚠️ 注意事项：

• 不要混用 href 和 data-target；BS5 完全不支持 data-target 控制 Tabs。
• 确保每个 href 值与对应 tab-pane 的 id 严格一致（包括大小写和特殊字符）。
• 若页面中存在多个 Tab 组，请为每个 ul.nav-tabs 设置唯一 id（如 myTab1, myTab2），并在 JS 初始化时显式调用（虽通常自动初始化，但多组时建议明确）：

  const tabTrigger = document.querySelector('#myTab1 a[data-bs-toggle="tab"]');
  tabTrigger?.addEventListener('shown.bs.tab', event => {
    // 可选：Tab 切换后执行逻辑，例如重置 Swiper 实例
  });

• 若你同时使用 Swiper JS，请注意：Tab 切换后 .tab-pane 从 display: none 变为 display: block 时，Swiper 可能未正确测量容器尺寸。建议在 shown.bs.tab 事件中手动调用 swiper.update() 或 swiper.init()。

总结：这不是 Swiper 或浏览器兼容性问题，而是 Bootstrap 5 的 API 使用偏差。回归官方文档范例（Bootstrap 5 Tabs Docs），坚持使用 href，即可彻底解决首个 Tab 异常跳顶的问题。