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 默认行为将失效——浏览器会将 <a> 标签视为普通锚点链接，而由于 href 缺失或为空，点击时触发默认跳转逻辑：滚动至页面顶部，并在 URL 后追加 #（即 index.html#），这正是你观察到的现象。
✅ 正确写法（修复后）：
<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">
<div class="tab-pane fade show active" id="tab11">Tab 1 content</div>
<div class="tab-pane fade" id="tab12">Tab 2 content</div>
<div class="tab-pane fade" id="tab13">Tab 3 content</div>
<div class="tab-pane fade" id="tab14">Tab 4 content</div>
</div>⚠️ 注意事项：
- 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 等第三方库。
