Bootstrap列表项激活态需手动添加.active类到<li>元素，不可依赖JS自动管理或:hover模拟，须配合aria-current="true"提升可访问性，且父容器必须为.list-group。
如何给 Bootstrap 列表项 .list-group-item 添加激活态
Bootstrap 的 .list-group-item 激活状态不是靠 JS 自动管理，而是靠手动加 .active 类。它不依赖任何数据绑定或组件状态，纯 CSS 控制样式——所以你得自己决定哪个 item 该亮、什么时候亮、怎么切换。
常见错误是以为点击后会自动高亮，结果发现没反应；或者用 :hover 误当激活态；又或者在动态渲染（比如 Vue/React）里忘了同步 class。
-
.active必须加在<li>元素上（不是<a>或<button>子元素），否则默认主题样式不生效 - 如果列表项是
<a>标签，建议同时加aria-current="true"，提升可访问性 - Bootstrap 5 要求
.list-group父容器存在，否则.active的背景/颜色可能异常
.list-group-item.active 的样式表现和兼容性
激活态主要改三处：背景色、文字色、边框（部分变体）。默认是蓝灰底 + 白字 + 无左右边框（视觉上“融入”成一体）。但这个样式在不同版本间有差异：
- Bootstrap 4.6 和 5.0+ 都支持
.active，但 5.0+ 移除了对.disabled+.active的组合样式支持——两者别同时加 - 如果用了
.list-group-flush，.active仍生效，但上下边框被清空，容易显得“没选中”，建议额外加一点 padding 或 shadow 辅助识别 - 自定义主题时，
.list-group-item.active的 CSS 特异性很高（带父选择器），覆盖时要用同等或更高优先级，比如.my-list .list-group-item.active
示例写法：
<ul class="list-group"> <li class="list-group-item">普通项</li> <li class="list-group-item active">当前激活项</li> <li class="list-group-item">未激活项</li> </ul>
用 JavaScript 手动切换 .active 的安全写法
别直接用 document.querySelector('.active').classList.remove('active')，因为可能根本不存在已激活项，会报 Cannot read property 'classList' of null。
- 先查所有
.list-group-item，再用Array.from()转数组，统一清理.active - 给目标元素加
.active前，确保它是.list-group-item的直系子元素（避免误操作嵌套内容） - 如果列表由 JS 动态生成，推荐在渲染后统一绑定事件，而不是用事件委托监听
.list-group—— 因为 Bootstrap 官方 demo 全是静态结构，委托逻辑容易漏掉初始化状态
简短参考：
document.querySelectorAll('.list-group-item').forEach(el => el.classList.remove('active'));
targetItem.classList.add('active');
为什么 router-link-active 类不能直接替代 .active
Vue Router 的 router-link-active 或 React Router 的 active class 是语义标记，只说明“当前路由匹配”，不触发 Bootstrap 的激活样式。它和 .list-group-item.active 是两套体系，不互通。
- 必须显式把
router-link-active映射到.active，比如 Vue 中用exact-active-class="active" - React 中需用
className={({ isActive }) => `list-group-item ${isActive ? 'active' : ''}`} - 忽略这点会导致：路由变了，DOM 上有
router-link-active，但 Bootstrap 样式完全没反应
.active 只管视觉反馈，其他逻辑得你自己串起来。 
