listgroupitem 显示激活态需同时添加 list-group-item 和 active 类，如 ；react 中用 classname={list-group-item ${activekey === id ? 'active' : ''}} 动态控制，禁用时不可混用 disabled，应改用 aria-current 提升无障碍支持。
如何让 ListGroupItem 显示为激活态（active）
Bootstrap 的 ListGroupItem 默认不带激活样式，必须显式添加 active 类才能触发蓝色背景 + 白色文字的激活态视觉效果。这个类名是 Bootstrap 5+ 官方约定，不是自定义类，也不能用 is-active 或 selected 替代。
常见错误是只写 className="active" 却忘了它必须和 list-group-item 共存——否则样式无法继承基础边框、圆角、内边距等：
- React 中使用
className，非class - Vue 中用
class="list-group-item active"即可 - 若用的是 Bootstrap 4，同样有效；Bootstrap 5 未改动该行为
- 不要试图用
:hover或:focus模拟激活态——它们没有语义，也不被屏幕阅读器识别
active 类和 JavaScript 动态控制的配合方式
激活态通常需响应用户点击切换，不能硬编码在 HTML 里。关键点在于：状态管理必须驱动 class 切换，而非仅改内容或加 style。
以 React 函数组件为例，典型写法是：
const [activeKey, setActiveKey] = useState('item-1');<br><br>{items.map(item => (<br>
className={`list-group-item ${activeKey === item.id ? 'active' : ''}`}
onClick={() => setActiveKey(item.id)}
>{item.text}
))}
- 必须用模板字符串拼接 class，避免空格残留（如
className="list-group-item active"多余空格会导致失效） - 不要用
classList.toggle()手动操作 DOM——破坏 React 的渲染一致性 - 如果列表项来自 API，注意
activeKey初始化值要与首项 ID 匹配，否则首屏无激活项
为什么 disabled 和 active 不能同时存在
Bootstrap 明确禁止 active 与 disabled 同时作用于一个 ListGroupItem。一旦加了 disabled，CSS 会强制覆盖 active 的背景色和文字色，最终显示为灰色不可点击态，且 active 的语义完全丢失。
- 现象：
<li class="list-group-item active disabled">…</li>看起来像禁用项，不是激活项 - 原因：Bootstrap 的
.disabled样式优先级更高，并重置了所有交互相关属性 - 替代方案：若需“视觉激活但不可操作”，应改用
aria-current="true"+ 自定义 CSS，而非依赖active类 - 无障碍要求：
aria-current="page"或aria-current="step"比纯视觉active更可靠
自定义激活样式时最容易忽略的兼容点
如果项目里覆盖了 .list-group-item.active 的默认样式（比如改成紫色背景），务必检查三个地方：
- 是否保留了
border-color—— Bootstrap 的激活项默认会加深边框色，去掉后可能显得“浮”在列表外 - 是否重写了
:focus-visible样式 —— 键盘用户 Tab 到激活项时，若没提供焦点轮廓，会违反 WCAG 2.4.7 - 是否遗漏了
dark mode下的适配 —— Bootstrap 5.3+ 支持data-bs-theme="dark"，自定义颜色需同步提供暗色版本，否则激活项在深色主题下可能看不见文字
直接改 !important 不解决问题，反而会让后续维护更难——最好用更高特异性选择器，例如 .my-app .list-group-item.active。
