Bootstrap如何实现列表组（List Group）选中效果-Bootstrap教程-PHP中文网

Bootstrap List Group 的点击选中状态需用 JavaScript 动态控制 active 类，监听点击事件并切换类名，避免依赖 data-bs-toggle="list" 等静态方案，确保状态可维护、可扩展、兼容框架与响应式场景。

如何给 Bootstrap List Group 添加点击选中状态

bootstrap 的 list-group 本身不自带“单选/多选”逻辑，选中效果必须靠手动添加 active 类 + javascript 控制。直接写死 active 只能静态高亮，无法响应点击切换。

用 JavaScript 动态切换 `active` 类（最常用方案）

核心是监听点击事件，移除所有兄弟项的 active，再给当前项加上。注意要防止重复绑定、事件委托失效等问题。

确保使用 document.querySelectorAll('.list-group-item') 获取全部项，而不是 .list-group 父容器
用 event.target 判断点击是否落在 .list-group-item 上（避免点击内部按钮/链接时失效）
推荐用 classList.toggle('active') 实现单选；若需多选，改用 classList.add('active') 并自行管理取消逻辑

document.querySelectorAll('.list-group-item').forEach(item => {
  item.addEventListener('click', () => {
    document.querySelectorAll('.list-group-item').forEach(i => i.classList.remove('active'));
    item.classList.add('active');
  });
});