bootstrap 5 list-group需用js手动控制active类实现点击高亮，推荐事件委托清空所有再添加目标；list-group-item-action仅提供样式反馈，不自动处理选中态；data-bs-toggle="list"仅适用于tab切换场景；移动端应加touch-action和伪元素扩展热区。
如何用 Bootstrap 5 的 list-group 实现点击高亮选中效果
原生 list-group 不自带选中态切换逻辑，必须配合 JS 手动控制 active 类。直接写 class="list-group-item active" 只是静态高亮，无法响应点击切换。
常见错误是只改样式不移除旧项的 active，导致多个 item 同时高亮。正确做法是：点击时先清空所有 active，再给目标加。
推荐用事件委托绑定到 list-group 容器上，避免重复绑定：
document.querySelector('.list-group').addEventListener('click', e => {
if (e.target.classList.contains('list-group-item')) {
document.querySelectorAll('.list-group-item').forEach(el => el.classList.remove('active'));
e.target.classList.add('active');
}
});
为什么 list-group-item-action 点击后没反馈？
这个类只是让 item 表现得像按钮（加 hover/focus 样式、手型光标），但不会自动添加 active 或触发任何 JS 行为。它和 active 类完全无关。
如果你用了 list-group-item-action 却没看到点击反馈，检查两点：
- 是否漏写了
href="#"或tabindex="0"—— 否则 focus 状态无法触发 - 是否覆盖了 Bootstrap 默认的
:focus样式（比如重置了 outline） - 在非 a/button 元素上用它时，需手动加
role="button"才符合可访问性
用 data-bs-toggle="list" 能否替代手写 JS？
可以，但仅限于纯前端路由跳转或 tab 切换场景，且要求每个 list-group-item 都带 data-bs-target 或 href 指向对应区域。它本质是 Bootstrap 的 tab 插件复用逻辑，不是通用选中控制器。
典型用法：
<div class="list-group"> <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#home">Home</a> <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile">Profile</a> </div> <div class="tab-content"> <div class="tab-pane" id="home">...</div> <div class="tab-pane" id="profile">...</div> </div>
注意：它会自动同步 active 类到 item 和 tab-pane，但如果你不需要 tab-pane，只想要列表选中态，就别用这个——它会强行操作 DOM、引入不必要的依赖。
移动端点击延迟与可点击区域问题
Bootstrap 5 的 list-group-item 默认 padding 是 0.5rem 1rem，在手机上手指点不准容易失焦。别直接加大 padding，这会影响垂直对齐和紧凑布局。
更稳妥的做法是：
- 给
list-group-item加touch-action: manipulation减少 300ms 延迟 - 用伪元素扩展点击热区：
::before { content: ""; position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; } - 确保父容器没设
overflow: hidden，否则伪元素可能被裁剪
交互细节往往卡在像素级体验上，尤其是列表项密集时，热区不扩大，用户会反复点击失败。
