bootstrap list group 嵌套 tab 在首次点击后子链接“冻结”失效，根本原因是 bootstrap 的 tab 激活状态未重置；本文提供纯 javascript 修复方案，通过监听父级切换事件动态清除子项 active 类，确保多级导航可重复触发。
bootstrap list group 嵌套 tab 在首次点击后子链接“冻结”失效，根本原因是 bootstrap 的 tab 激活状态未重置；本文提供纯 javascript 修复方案，通过监听父级切换事件动态清除子项 active 类，确保多级导航可重复触发。
在使用 Bootstrap 构建多层级页面导航（如左侧菜单 + 右侧子选项卡）时，开发者常借助 list-group 与 tab-pane 组合实现交互逻辑。但一个典型陷阱是：当子级链接（如“Link 1”“Link 2”）被 Bootstrap 自动添加 active 类后，若父级 Tab 切换（如从 “Profile” 切回 “Home”），子级 active 状态不会自动清除——导致后续点击无法触发内容切换，表现为“点击无响应”或“冻结”。
该问题并非 HTML 结构错误，而是 Bootstrap 的设计机制所致：data-toggle="tab" 仅管理目标 pane 的 show/fade 状态，并不主动清理其他已激活的 tab 项。尤其在嵌套结构中，子级 标签虽位于不同 .tab-pane 内，但其 active 类一旦被设置，便持续存在，阻碍了 Bootstrap 的内部状态判断。
✅ 正确解决思路是：在每次切换父级 Tab 时，主动重置对应子级列表中所有链接的 active 状态。这无需修改 Bootstrap 源码，仅需轻量级 JavaScript 监听与操作。
以下为完整、可直接运行的修复方案：
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<div class="row">
<div class="col-4">
<!-- 父级导航 -->
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active"
id="list-home-list"
data-toggle="tab"
href="#list-home"
role="tab"
aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list"
data-toggle="tab"
href="#list-profile"
role="tab"
aria-controls="profile">Profile</a>
</div>
</div>
<div class="col-8">
<!-- 父级 Tab 内容区 -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home">
<div class="list-group" id="link-1-tab">
<a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">Link 1</a>
</div>
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
<div class="list-group" id="link-2-tab">
<a class="list-group-item" data-toggle="tab" href="#bb" role="tab" aria-controls="b">Link 2</a>
</div>
</div>
</div>
</div>
</div>
<br><br>
<!-- 子级页面内容区（独立 tab-content） -->
<div class="tab-content" id="nav-tabPage">
<div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">Page 1</div>
<div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="bb">Page 2</div>
</div>
<!-- Bootstrap JS（含 Popper & jQuery） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- ✅ 关键修复脚本 -->
<script>
// 获取父级 Tab 触发元素
const homeTab = document.querySelector("#list-home-list");
const profileTab = document.querySelector("#list-profile-list");
// 获取对应子级链接（注意：ID 需与 HTML 中一致）
const link1 = document.querySelector("#link-1-tab .list-group-item");
const link2 = document.querySelector("#link-2-tab .list-group-item");
// 当切换到 Home 时，清除 Link 1 的 active 状态
homeTab.addEventListener("shown.bs.tab", () => {
if (link1) link1.classList.remove("active");
});
// 当切换到 Profile 时，清除 Link 2 的 active 状态
profileTab.addEventListener("shown.bs.tab", () => {
if (link2) link2.classList.remove("active");
});
</script>? 关键注意事项：
- 使用 shown.bs.tab 事件而非 click：它在 Tab 完全切换并渲染完毕后触发，确保 DOM 已就绪；
- 子级 元素需有唯一且可定位的容器（如 id="link-1-tab"），避免多个同名元素误操作；
- 若项目使用 Bootstrap 5+，请将 data-toggle="tab" 替换为 data-bs-toggle="tab"，且事件名改为 shown.bs.tab（保持不变），但需引入 Bootstrap 5 的 JS 包；
- 不建议依赖 jQuery 的 .tab('show') 手动触发，因易引发状态冲突；原生 classList.remove() 更轻量、可控；
- 如需支持更多层级（如三级导航），可扩展监听逻辑，按需清空对应子容器内的所有 .active 类。
? 总结：Bootstrap 的 Tab 组件本身不维护跨层级的状态同步。要实现可靠嵌套导航，必须显式管理 active 类的生命周期。本方案以最小侵入方式补全了框架能力边界，兼顾兼容性、可维护性与性能，是构建企业级前端导航系统的推荐实践。
