Bootstrap 5 导航标签页（Tabs）点击后页面跳转到顶部的解决方案

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
     
       
         Tab1       
       
         Tab2       
       
         Tab3       
       
         Tab4       
     
     
       
         some Bootstrap Card with Swiper JS       
       
         some Bootstrap Card with Swiper JS       
       
         some Bootstrap Card with Swiper JS       
       
         some 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）降级及未来版本兼容风险。