Bootstrap List-group导航出现多激活链接问题，求代码排查

你的代码结构本身没问题，出现多个active状态无法自动切换的核心原因是没有正确引入Bootstrap的JavaScript文件——List-group标签页的切换逻辑完全依赖Bootstrap JS来处理自动移除/添加active类的操作，仅靠CSS样式无法实现交互逻辑。

具体修复步骤 #

1. 确保引入正确的依赖文件 #

根据你使用的Bootstrap版本，引入对应的JS文件：

• Bootstrap 5（推荐）：无需额外依赖，直接在页面底部引入Bootstrap JS

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• Bootstrap 4：需要先引入jQuery和Popper.js，再引入Bootstrap JS

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
  

2. 验证完整代码示例 #

下面是可以直接运行的完整代码，包含正确的依赖引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>List-group标签页</title>
</head>
<body>
  <div class="container mt-4">
    <!-- List group -->
    <ul class="list-group" id="myList" role="tablist">
      <li class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab" aria-selected="true">Home</li>
      <li class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab" aria-selected="false">Profile</li>
      <li class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab" aria-selected="false">Messages</li>
      <li class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab" aria-selected="false">Settings</li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content mt-2">
      <div class="tab-pane active" id="home" role="tabpanel">A</div>
      <div class="tab-pane" id="profile" role="tabpanel">B</div>
      <div class="tab-pane" id="messages" role="tabpanel">C</div>
      <div class="tab-pane" id="settings" role="tabpanel">D</div>
    </div>
  </div>

  <!-- 引入Bootstrap JS（Bootstrap 5版本） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. 其他可能的排查点 #

如果已经引入了JS但问题依旧，检查以下内容：

• 页面中是否存在多个版本的jQuery/Bootstrap JS，导致冲突
• 浏览器控制台是否有报错信息（按F12打开开发者工具查看）
• 确保没有自定义JS代码覆盖了Bootstrap的标签页切换逻辑

内容的提问来源于stack exchange，提问作者Vakindu