bootstrap 5 中使用 `data-target` 替代 `href` 会导致首个标签页点击时页面跳至顶部并修改 url 哈希，正确做法是严格遵循官方规范：所有 `nav-link` 必须使用 `href` 属性指向对应 tab-pane 的 id，而非 `data-target`。
在 Bootstrap 5 中，Tab 组件的 JavaScript 行为高度依赖 标签的 href 属性来定位目标 .tab-pane。虽然早期 Bootstrap 版本或部分文档片段中曾出现 data-target 的用法，但 Bootstrap 5 官方明确要求必须使用 href（参见 Bootstrap 5 Tabs 文档）。当 href 缺失或被 data-target 错误替代时，浏览器会将 视为无目标链接（即 href="#"），触发默认跳转行为——滚动至页面顶部，并在 URL 后追加 #，这正是你观察到的现象（index.html → index.html#）。
✅ 正确写法（修复后）：
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
⚠️ 注意事项：
- 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，即可彻底解决首个标签页异常跳顶问题，并确保所有标签页行为一致可靠。
