bootstrap 5 中使用 `data-target` 替代 `href` 会导致首个标签页点击时页面跳转至顶部并修改 url 锚点，正确做法是严格使用 `href` 属性指向对应 tab-pane 的 id。
在 Bootstrap 5 的 Tabs 组件中，href 属性不仅是语义必需，更是功能关键——它被 Bootstrap 内部 JavaScript 用于定位目标 tab-pane，并阻止默认的锚点跳转行为（前提是 DOM 结构和属性配置正确）。而你当前代码中完全移除了 href、仅保留 data-target，这将导致：
- 浏览器将 标签视为无目标链接（href="" 或缺失），点击时触发默认行为：滚动至页面顶部 + URL 追加 #；
- Bootstrap 的 tab 插件无法通过 data-target 自动绑定事件（该属性在 BS5 中已弃用，仅作向后兼容参考，不参与核心逻辑）；
- 仅首个标签页表现异常，是因为其 class="active" 状态与初始 URL # 锚点发生冲突，后续 tab 切换由 JS 控制，掩盖了问题。
✅ 正确写法（修复后的 HTML 片段）：
Heading
some Bootstrap Card with Swiper JSsome Bootstrap Card with Swiper JSsome Bootstrap Card with Swiper JSsome Bootstrap Card with Swiper JS
⚠️ 关键注意事项：
- href 值必须以 # 开头，且严格匹配目标 .tab-pane 的 id（大小写、连字符、下划线均需一致）；
- 确保每个 tab-pane 具有唯一 id，且无重复或空值；
- 移除所有 data-target —— Bootstrap 5 官方文档明确指出该属性已废弃，不应在新项目中使用；
- 若页面含 Swiper JS，请确保 Swiper 实例在 tab 激活后重新初始化（因 .tab-pane 默认为 display: none，Swiper 需在显示后计算尺寸），推荐监听 shown.bs.tab 事件：
document.addEventListener('shown.bs.tab', function (e) {
const targetId = e.target.getAttribute('href');
if (targetId && document.querySelector(targetId + ' .swiper')) {
new Swiper(targetId + ' .swiper', { /* 配置项 */ });
}
});总结：Bootstrap 5 Tabs 的可靠性高度依赖标准 HTML 结构与官方推荐属性。坚持使用 href="#id" 而非 data-target，不仅能解决跳顶问题，还能避免潜在的事件绑定失败、可访问性（a11y）降级及未来版本兼容风险。
