本文旨在解决Bootstrap List Group中嵌套链接在首次点击后失效的问题。通过JavaScript代码，移除激活状态，确保嵌套链接在每次点击父级选项卡后都能正常工作，从而实现预期的页面导航功能。本文提供了详细的代码示例和解释，帮助开发者快速定位和解决类似问题。
在使用Bootstrap的List Group组件实现页面导航时，可能会遇到嵌套链接在第一次点击后“冻结”失效的问题。 这通常是由于Bootstrap的tab组件的默认行为导致的：tab被激活后会一直保持active状态。以下提供一种使用JavaScript解决此问题的方案。
问题分析
当用户点击主List Group中的选项（例如"Home"或"Profile"）时，相应的嵌套链接会显示。 但是，一旦嵌套链接（如"Link 1"或"Link 2"）被点击一次，它们就会保持active状态，导致后续点击无效。
解决方案
解决思路是在每次点击主List Group的选项时，移除对应嵌套链接的active class。 这样，每次显示嵌套链接时，它们都处于未激活状态，可以正常响应点击事件。
实现步骤：
- 获取元素引用： 使用JavaScript获取主List Group选项和嵌套链接的DOM元素。
- 添加事件监听器： 为主List Group的选项添加点击事件监听器。
- 移除active class： 在事件处理函数中，移除对应嵌套链接的active class。
代码示例：
首先，确保你的HTML结构如下，注意id的命名规范，方便JavaScript代码选取：
<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>然后，添加以下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");
});代码解释：
- document.querySelector() 用于获取指定CSS选择器的第一个元素。
- addEventListener() 用于为元素添加事件监听器，监听 click 事件。
- classList.remove("active") 用于移除元素的 active class。
注意事项：
- 确保在Bootstrap的JavaScript文件之后引入这段JavaScript代码。
- 根据你的实际HTML结构调整CSS选择器。
总结
通过以上步骤，可以解决Bootstrap List Group嵌套链接点击失效的问题。 核心思路是在每次显示嵌套链接之前，重置其激活状态，确保它们能够正常响应点击事件。 这个方法简单有效，可以应用于各种类似的场景。
