Bootstrap 5 Tab组件必须使用data-bs-toggle="tab"，tab-pane需含fade类及首个加show active，JS控制须用bootstrap.Tab实例而非jQuery。
Bootstrap 5 的 Tab 组件必须用 data-bs-toggle="tab"
bootstrap 5 彻底移除了 data-toggle，所有 js 触发属性都加了 bs- 命名空间。如果你照着旧教程写 data-toggle="tab"，点击标签页完全没反应，控制台也不会报错——这是最常卡住人的地方。
正确写法是：
<a href="#home" data-bs-toggle="tab">Home</a> <div class="tab-pane fade" id="home"></div>
-
href或data-bs-target必须指向对应tab-pane的id，且要一致（大小写、符号都不能差） -
tab-pane必须有fade类，否则切换时无淡入效果，且首次加载可能不显示内容 - 第一个
tab-pane还得额外加show active，否则初始为空白
手动触发切换要用 bootstrap.Tab 实例，不是 $().tab('show')
jQuery 已被 Bootstrap 5 移除，不能再用 $('[href="#profile"]').tab('show')。想用 JS 控制切换，必须先获取 DOM 元素，再用原生 JS 初始化 Tab 实例。
例如：
const triggerEl = document.querySelector('[href="#profile"]')
const tab = new bootstrap.Tab(triggerEl)
tab.show()
- 必须等 DOM 加载完再执行，否则
querySelector找不到元素 - 不能对同一个元素重复
new bootstrap.Tab()，会报Tab already initialized - 如果标签页是动态插入的，得在插入后单独初始化新元素上的 Tab
切换后内容不显示？检查 tab-pane 的 display 和 visibility
常见现象：点标签页，导航高亮了，但内容区域一片空白。大概率是 CSS 干扰或类名漏写。
- 确保每个
tab-pane都有fade，且至少一个带show active - 避免自定义样式里写了
display: none !important或visibility: hidden，会盖过 Bootstrap 的show类逻辑 - 如果用了
collapse或其他 JS 组件嵌套，注意它们的display状态可能冲突 - 用浏览器开发者工具检查目标
tab-pane的最终 computeddisplay值，是不是block
用 nav-tabs 还是 nav-pills？只差一个类，但语义和默认样式不同
两者都支持 data-bs-toggle="tab"，区别纯在视觉和语义：
-
nav-tabs是底部横线 + 圆角矩形，适合传统选项卡场景 -
nav-pills是胶囊状背景色块，更适合强调当前选中项的操作入口 - 两者都不影响 JS 行为，可互换，但别混用（比如
nav-tabs里塞nav-link active却漏了tab-pane结构） - 移动端小屏下，
nav-tabs默认会换行，若内容多建议加flex-nowrap overflow-x-auto防折行
Tab 的核心就三件事：触发器带 data-bs-toggle、面板有 id 和 fade show active、JS 操作走 bootstrap.Tab 实例。其余都是围绕这三点的干扰项。
