Bootstrap列表项激活态需在.list-group-item元素上加.active类，且须配合语义属性aria-current="true"；错误加在父容器或忽略标签类型将导致样式失效。
如何给 Bootstrap 列表项加 .active 类
直接加 .active 就行，但必须加对位置、加对元素类型，否则样式不生效。
Bootstrap 的列表组（.list-group）里，激活态只认 .list-group-item 元素上的 .active 类——不是父容器，也不是链接标签本身（除非你用的是 <a></a> 形式且加了 .list-group-item-action）。
- ✅ 正确写法：
<li class="list-group-item active">首页</li> - ❌ 错误写法：
<ul class="list-group active">...</ul>（父级加没用） - ⚠️ 如果用
<a></a>替代<li>，必须同时加.list-group-item和.list-group-item-action才能响应 hover/active 样式
为什么加了 .active 却没变蓝/没高亮
常见原因是 CSS 优先级被覆盖，或者用了错误的 HTML 结构。
Bootstrap 5 默认对 .list-group-item.active 设置了蓝色背景和白色文字，但如果你在导航栏、自定义主题或第三方 CSS 框架下使用，很可能被其他规则压掉了。
- 检查浏览器开发者工具：看
.list-group-item.active的 background-color 是否被划掉（strikethrough），确认是否被更高优先级样式覆盖 - 不要依赖
!important硬怼，优先用更具体的选择器，比如：.my-list .list-group-item.active - 如果列表项是
<a></a>标签，记得补上aria-current="true"（语义化要求，部分辅助技术依赖它）
Bootstrap 4 和 5 在 active 处理上的关键差异
不是所有写法都跨版本兼容，尤其涉及可访问性属性和默认行为。
- Bootstrap 4：允许
<li class="list-group-item active">，不强制要求aria-current - Bootstrap 5：官方示例中明确添加
aria-current="true"，且禁用项改用.disabled类 +aria-disabled="true" - 颜色类名保持一致（如
.list-group-item-success），但.active本身不再带颜色变体，它始终覆盖底色 - 水平列表组（
.list-group-horizontal）中.active行为完全一样，无需额外处理
用 JavaScript 动态切换 active 状态时的坑
手动操作 DOM 或用框架绑定时，容易漏掉语义属性或触发时机不对。
- 别只改 class，同步更新
aria-current：设为"true"（激活项）或移除该属性（非激活项） - 用
querySelectorAll(".list-group-item")获取全部项，再遍历移除.active，最后给目标加——避免多个 active 并存 - React/Vue 中，不要用
style={{}}写:active伪类，那根本不会生效；必须走 class 控制 + 外部 CSS - 如果列表项含下拉菜单（
.dropdown），确保.active加在最外层.list-group-item上，而不是 dropdown-toggle 内部
