Bootstrap 5 的 nav-tabs 默认不自动激活首个标签，必须手动为首个 添加 active 类，且对应 必须同时包含 show 和 active 类，否则初始内容不显示或切换失效。
Bootstrap 5 的 nav-tabs 不自动激活第一个标签？
默认情况下，Bootstrap 5 的标签页不会自动高亮或激活任何 <li>，必须手动给第一个 <li> 加 class="active"，同时对应面板（<div class="tab-pane">）也要加 <code>show active —— 少一个，切换就失效或初始不显示内容。
常见错误现象：点击标签没反应、页面空白、所有标签都灰着、控制台无报错但逻辑卡死。
- 确保
<ul class="nav nav-tabs"></ul>下首个<li>有class="nav-item active" - 对应
<div class="tab-content"> 中首个 <code><div class="tab-pane"> 必须同时含 <code>show和active（顺序无关，但缺一不可） -
data-bs-toggle="tab"必须写在触发元素（如<a></a>或<button></button>）上，且href或data-bs-target要精准匹配目标面板的id - 删除时先获取当前激活标签的
id，再移除对应<li>和<div.tab-pane></div.tab-pane>；若删的是当前激活项，需手动激活前一个或后一个（否则整个内容区变空） - 新增标签时，要生成唯一
id（如"tab-" + Date.now()），同时追加<li>和<div class="tab-pane">，最后调用 <code>bootstrap.Tab.getInstance(...).show()激活它 - 避免重复 ID 或未清理事件监听器，否则多次增删后 JS 行为异常
- 初始状态所有
tab-pane不放真实内容，只留占位结构（如<div class="tab-pane" id="tab-users"><div class="loading">加载中...</div></div>） - 监听
shown.bs.tab事件，在回调里判断该面板是否已加载过（可用data-loaded="true"标记），未加载则用fetch或$.get()获取 HTML 片段，再.html(...)注入 - 避免在
show.bs.tab（切换前）里做异步加载，会导致 UI 卡住或激活失败 - 监听
shown.bs.tab，拿到当前tab的id，然后history.pushState({ tab: id }, '', '?tab=' + id) - 页面初始化时检查
URLSearchParams，如果有tab=xxx，就用new bootstrap.Tab(document.querySelector('[data-bs-target="#' + id + '"]')).show()主动激活 - 别忘了监听
window.onpopstate，处理浏览器前进/后退时的标签同步 - 多个标签页共存时（比如左右两个独立 tab 区域），务必用不同 query key（如
?main-tab=/?side-tab=），否则互相覆盖
怎么让后台标签页支持“关闭按钮”和动态增删？
Bootstrap 原生 nav-tabs 不提供关闭功能，需手写 JS 控制 DOM。关键点不是加按钮，而是同步更新导航项（<li>）和面板（<div class="tab-pane">），并确保激活态正确迁移。
<p>使用场景：后台系统中用户频繁打开/关闭不同模块（如「用户管理」「订单详情」「日志查看」），不能靠刷新页面实现。</p>
<ul>
<li>关闭按钮建议用 <code><button type="button" class="btn-close" aria-label="Close"></button>，放在 <li> 内部右侧
tab-pane 里的内容加载慢，怎么避免白屏或卡顿？
后台标签页常嵌入表格、图表或表单，如果所有 tab-pane 在页面加载时就渲染 DOM，会拖慢首屏、浪费资源。推荐懒加载（lazy load）：只在首次切换到该标签时才初始化内容。
性能影响明显：10 个标签全渲染可能增加 800ms+ 首屏时间，而懒加载可压到 200ms 内（尤其含 echarts 或 datatables 时）。
为什么用 data-bs-toggle="tab" 切换后 URL 不变？
原生 Bootstrap Tab 切换不修改 URL，这对后台系统其实反而是优点：避免路由冲突、减少前端路由库依赖。但如果你需要前进/后退支持或分享链接，就得自己补逻辑。
兼容性注意：history.pushState() 在 IE 中不可用，若需兼容旧浏览器，只能用 location.hash 方案。
真正难的不是写几个 nav-tabs，而是当用户连续开 7 个标签、其中 3 个正在异步加载、2 个含未保存表单、1 个被其他窗口实时推送数据更新时，如何让关闭逻辑不丢数据、切换不重绘、URL 同步不打架——这些细节不在文档里，得靠每次 console.log(e.target) 摸出来。
