Bootstrap List Group嵌套链接点击失效问题解决方案-js教程-PHP中文网

Bootstrap List Group嵌套链接点击失效问题解决方案

DDD

发布： 2025-10-21 12:58:15

原创

915人浏览过

bootstrap list group嵌套链接点击失效问题解决方案

本文旨在解决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。

代码示例：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

首先，确保你的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");
});

登录后复制

代码解释：