推荐使用 bootstrap.Tab.getInstance() 获取实例再调用 show()，需传入带 data-bs-toggle="tab" 的导航项元素，确保事件、.active 类和 aria-selected 状态同步；若目标未初始化会抛出 TypeError。
用 bootstrap.Tab.getInstance() 获取实例再调用 show()
Bootstrap 5.3+ 推荐这种方式，安全可靠，能确保事件、.active 类、aria-selected 状态全部同步更新。直接操作 DOM 或手动加类会漏掉可访问性逻辑，容易导致屏幕阅读器失效或键盘导航中断。
关键点：
-
bootstrap.Tab.getInstance()必须传入带data-bs-toggle="tab"的导航项元素（如或），不能传.tab-pane - 若目标导航项尚未初始化（比如是动态插入的），需先确保 Bootstrap JS 已执行过该节点，否则抛出
TypeError: No tab found - 示例：
const triggerEl = document.querySelector('[data-bs-target="#profile"]');<br>const tab = bootstrap.Tab.getInstance(triggerEl);<br>if (tab) tab.show();
用 document.querySelector().click() 模拟点击最简单
适用于大多数静态结构，兼容性好，连旧版 Bootstrap 4 也能用。本质是触发原生 click 事件，让 Bootstrap 自动处理后续逻辑，包括淡入动画、事件派发、焦点管理。
注意：
- 目标元素必须是实际可交互的导航项，且已渲染在 DOM 中；如果它被
display: none包裹或父容器不可见，click()无效 - 不要对
.tab-pane元素调用click()—— 它没绑定任何切换行为 - 示例：
document.querySelector('[href="#settings"]').click();
切换前要检查目标是否存在，避免 Cannot read properties of null
常见错误是硬编码 ID，但对应导航项或内容区被注释、条件渲染跳过，或拼写不一致（比如 #profile vs #Profile）。JS 不报语法错，但后续所有逻辑都静默失败。
建议写法：
- 先查导航项：
const el = document.querySelector('[data-bs-target="#billing"]'); - 再查对应内容区：
const pane = document.querySelector(el?.getAttribute('data-bs-target')); - 两者都存在才执行
show()或click() - 开发时加个
console.warn提示缺失目标，上线前可删
异步加载 Tab 内容时，show() 调用时机很关键
如果 .tab-pane 是空的，等 AJAX 返回后再插入 HTML，那直接调用 show() 会导致内容区空白——因为 .show() 只切样式和状态，不等 DOM 渲染完成。
正确顺序：
- 先请求数据，插入完整 HTML 到
.tab-pane - 确保该
.tab-pane有fade类（否则无过渡动画） - 再调用
bootstrap.Tab.getInstance(triggerEl).show() - 如果需要滚动到内部锚点，监听
shown.bs.tab事件再执行scrollIntoView()
页面刷新后保持 Tab 状态、URL hash 跳转、自动轮播这些需求，底层都依赖同一套 JS 触发逻辑。最容易被忽略的是：**所有主动触发都必须作用于导航项，而非内容区；且必须等 DOM 就绪、目标真实存在后再执行**。否则看起来代码没错，实际什么都没发生。
