bootstrap
5 中使用 `data-target` 替代 `href` 会导致首个 tab 点击时页面跳转至顶部并修改 url，正确做法是严格遵循官方规范：所有 `.nav-link` 必须使用 `href` 指向对应 tab-pane 的 id，且值需以 `#` 开头。
在 Bootstrap 5 的 Tab 组件中，
href 属性不仅是语义要求，更是功能依赖的核心
。官方 JavaScript 插件通过监听 a.nav-link 的 click 事件，并读取其 href 属性（如 #tab11）来定位目标 .tab-pane。若改用 data-target，Bootstrap 默认行为将失效——
浏览器
会将 标签视为普通锚点链接，而由于 href 缺失或为空，点击时触发默认跳转逻辑：滚动至页面顶部，并在 URL 后追加 #（即 index.
html
#），这正是你观察到的现象。
✅ 正确写法（修复后）：
⚠️ 注意事项：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
href 值必须与目标 .tab-pane 的 id 完全一致，且
必须以 # 开头
（如 href="#tab11" 对应 id="tab11"）；
不要删除 data-bs-toggle="tab" —— 它是激活 Bootstrap Tab JS 行为的必要标记；
若页面中存在多个 Tab 组，请确保每个 id 和 href 组合全局唯一，避免冲突；
Swiper JS 通常不影响 Tab 切换逻辑，但建议在 Tab 切换完成后再初始化 Swiper（可监听 shown.bs.tab 事件），防止 DOM 尚未渲染导致轮播失效。
? 总结：这不是 Bug，而是对 Bootstrap 5 文档规范的误用。data-target 是 Bootstrap 4 的遗留写法，
Bootstrap 5 已明确弃用，仅支持 href
。统一使用 href 后，所有 Tab（包括第一个）将正常切换、无跳顶、无 URL 干扰，且完全兼容 Swiper 等第三方库。
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content