本文旨在解决Bootstrap List Group嵌套链接在初次点击后失效的问题。通过JavaScript代码，动态移除已激活链接的`active`类，确保每次点击父级Tab时，子链接都能正确响应，实现预期的页面导航效果。本文提供详细的代码示例和解释，帮助开发者理解并解决类似问题。
在使用 Bootstrap 的 List Group 组件创建嵌套链接时，可能会遇到一个问题：子链接在第一次点击后“冻结”，无法再次激活。 这通常是因为 Bootstrap 的 Tab 切换机制导致，一旦某个 Tab 被激活，其关联的链接就会保持 active 状态，从而阻止后续的点击事件生效。
问题分析
问题的核心在于 Bootstrap 的 Tab 组件默认行为：当一个 Tab 被点击并激活后，它会一直保持 active 状态。对于嵌套在 List Group 中的链接，这意味着一旦 Link 1 或 Link 2 被点击，它们就会一直处于激活状态，导致再次点击 Home 或 Profile 时，这些链接无法正确显示对应的页面内容。
解决方案
解决这个问题的关键在于，每次点击父级 Tab（Home 或 Profile）时，手动移除子链接的 active 类。 这可以通过 JavaScript 来实现，具体步骤如下：
- 获取 DOM 元素: 使用 document.querySelector 获取 Home、Profile 以及 Link 1 和 Link 2 对应的 DOM 元素。
- 添加事件监听器: 为 Home 和 Profile Tab 添加 click 事件监听器。
- 移除 active 类: 在事件处理函数中，使用 classList.remove("active") 移除对应子链接的 active 类。
代码示例
以下是解决此问题的 JavaScript 代码片段：
const homeTab = document.querySelector("#list-home-list");
const profileTab = document.querySelector("#list-profile-list");
const link1 = document.querySelector("#link-1-tab .list-group-item");
const link2 = document.querySelector("#link-2-tab .list-group-item");
homeTab.addEventListener("click", () => {
link1.classList.remove("active");
});
profileTab.addEventListener("click", () => {
link2.classList.remove("active");
});完整代码
以下是包含修复代码的完整 HTML 示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<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">
<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>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script>
const homeTab = document.querySelector("#list-home-list");
const profileTab = document.querySelector("#list-profile-list");
const link1 = document.querySelector("#link-1-tab .list-group-item");
const link2 = document.querySelector("#link-2-tab .list-group-item");
homeTab.addEventListener("click", () => {
link1.classList.remove("active");
});
profileTab.addEventListener("click", () => {
link2.classList.remove("active");
});
</script>注意:
- 确保在 HTML 中正确引用 Bootstrap 的 CSS 和 JavaScript 文件，以及 jQuery 库。
- 将 JavaScript 代码放在 HTML 文件的 </body> 标签之前，以确保 DOM 元素在脚本执行时已经加载。
- 根据实际情况调整选择器，确保正确获取到对应的 DOM 元素。 例如，在上面的代码中，我们给内部的list-group分别添加了id link-1-tab 和 link-2-tab， 这样可以更精确的定位到内部链接。
总结
通过以上方法，可以有效地解决 Bootstrap List Group 嵌套链接点击后失效的问题。 核心思路是利用 JavaScript 动态管理 active 类的状态，确保每次点击父级 Tab 时，子链接都能正确响应。 这种方法简单易懂，适用于各种类似的 Tab 切换场景，希望本文能帮助你更好地使用 Bootstrap 构建交互性强的 Web 界面。
