应监听 shown.bs.tab 事件，它在选项卡切换动画完成、新面板可见且 dom 更新后触发；target 指向新 .tab-pane，relatedtarget 指向旧 tab 链接，需绑定到 .tab-content 上。
监听 Bootstrap 选项卡切换完成事件用 shown.bs.tab
Bootstrap 的选项卡（Tab）切换是异步的，动画结束后才真正“激活”新标签页。如果你在 click 或 show.bs.tab 里操作 DOM，大概率拿不到渲染后的节点或尺寸——必须等 shown.bs.tab 触发。
这个事件在新 tab 面板完全显示、CSS 过渡结束、焦点已设置后触发，是唯一可靠的“切换完成”信号。
-
show.bs.tab：切换开始前触发，此时旧 tab 还没隐藏，新 tab 还没显示，DOM 未更新 -
shown.bs.tab：切换动画完成、新 tab 已可见、.active类已切换、aria-expanded等属性已更新 - 事件对象的
relatedTarget属性指向**被切换掉的旧 tab 元素**（不是新 tab），别搞反了
shown.bs.tab 的事件绑定位置和选择器
必须绑定在 tab-pane 的父容器（通常是 .tab-content）或全局 document 上，不能直接绑在单个 <a data-bs-toggle="tab"></a> 链接上——因为事件由 tab 内容区冒泡而来。
推荐绑定到 .tab-content，避免全局污染：
document.querySelector('.tab-content').addEventListener('shown.bs.tab', function (e) {
console.log('当前激活的 tab ID：', e.target.id); // e.target 是新的 .tab-pane 元素
console.log('上一个 tab ID：', e.relatedTarget.getAttribute('href').slice(1)); // #profile → profile
});
- 如果多个 tab 区域共存，用更具体的父选择器（如
#user-tabs .tab-content）隔离作用域 - 不要用 jQuery 语法（如
$().on('shown.bs.tab')），原生addEventListener更轻量且兼容 Bootstrap 5+ 的 ES 模块加载方式 - 事件名区分大小写：
shown.bs.tab，不是ShownBsTab或shownBsTab
常见错误：在 shown.bs.tab 里访问 DOM 失败
即使事件已触发，如果新 .tab-pane 是懒加载内容（比如通过 AJAX 填充），它的子元素可能还没插入。此时直接 e.target.querySelector('.chart') 会返回 null。
- 检查是否启用了懒加载：若 tab 内容初始为空，需在
shown.bs.tab中触发数据拉取，并在回调里操作 DOM - 避免依赖 CSS 动画时长做
setTimeout：不同设备/系统动画时长不一致，shown.bs.tab本身已保证动画结束 - 如果用框架（如 Vue/React），注意事件触发时机可能与组件生命周期错位，优先用框架自己的响应式机制，而非手动监听原生事件
兼容性与 Bootstrap 版本差异
shown.bs.tab 在 Bootstrap 4 和 5 中行为一致，但事件命名规则有变化：
- Bootstrap 4：事件名是
shown.bs.tab（带点） - Bootstrap 5：仍是
shown.bs.tab，但移除了 jQuery 依赖，必须用原生addEventListener - Bootstrap 3 使用
shown.bs.tab，但事件对象结构略有不同（e.target指向<a></a>标签而非.tab-pane），升级时要重测 - 没有
shownBsTab这种驼峰写法，所有 Bootstrap 事件都是小写+点分隔
最易被忽略的是：事件对象的 target 指向的是新激活的 .tab-pane 容器，而不是触发切换的导航链接——这点决定了你后续该从哪一层开始查数据或初始化组件。
