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');
});
});
为什么 href="#" 或 data-bs-toggle="list" 不够用
data-bs-toggle="list" 是 Bootstrap 5+ 提供的原生切换行为，但它只负责激活样式，**不触发任何事件回调，也不维护选中状态变量**。一旦页面刷新或 JS 重执行，状态就丢失。
- 它依赖
a标签和href属性，若列表项是button或含表单控件，会失效 - 无法区分单选/多选；默认行为是“点击即激活，再次点击不取消”
- 没有提供获取当前选中项的 API，后续逻辑（如提交选中 ID）还得自己查 DOM
兼容性与样式细节要注意什么
Bootstrap 5 的 .list-group-item.active 默认有蓝色背景和白色文字，但如果你自定义了主题色或用了 Sass 变量，$list-group-active-color 和 $list-group-active-bg 必须重新编译才能生效。
- 如果用了
list-group-flush，边框消失，但active样式仍有效 - 在
list-group-horizontal布局下，active依然适用，无需额外 CSS - 移动端点击反馈弱？可加
cursor: pointer和:active { opacity: 0.8; }提升手感
真正麻烦的不是加样式，而是状态同步——比如列表由 Vue/React 渲染，或需要和服务端联动选中值，这时候硬塞 active 类反而容易和框架的 class 绑定冲突。
