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 片段）：
<div class="container">
<div class="m-4">
<h5>Heading</h5>
<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 mt-3">
<div class="tab-pane fade show active" id="tab11">
some Bootstrap Card with Swiper JS
</div>
<div class="tab-pane fade" id="tab12">
some Bootstrap Card with Swiper JS
</div>
<div class="tab-pane fade" id="tab13">
some Bootstrap Card with Swiper JS
</div>
<div class="tab-pane fade" id="tab14">
some Bootstrap Card with Swiper JS
</div>
</div>
</div>
</div>⚠️ 关键注意事项：
- 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）降级及未来版本兼容风险。
