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 官方规范）：
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
⚠️ 注意事项：
- 不要混用 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 异常跳顶的问题。
