css列表项点击选中效果怎么做_使用active伪类或js添加样式

答案：通过CSS的:active伪类可实现点击时的临时高亮效果，松开即消失；若需持久选中，则需JavaScript动态添加.selected类来维持状态，配合事件监听实现单选或多选，推荐结合tabindex和键盘事件提升可访问性。

要实现列表项点击选中效果，可以通过 CSS 的 :active 伪类实现短暂的按下状态，但若需要“保持”选中状态（比如点一下就高亮并持续显示），则需借助 JavaScript 动态添加样式类。下面分别介绍两种方式。

使用 :active 伪类（临时点击效果）

这个方法适合用于按钮或链接被按下的瞬间视觉反馈，但松开鼠标后样式会消失。

例如：

.list-item:active {
  background-color: #007cba;
  color: white;
}

这种方式简单，无需 JS，但仅在鼠标按下时生效，无法“记住”哪个项被选中。

使用 JavaScript 添加选中类（持久选中效果）

如果希望点击后该项一直保持高亮（类似单选或多选效果），需要用 JavaScript 控制类名切换。

示例代码：

  
选项 1
  
选项 2
  
选项 3

CSS 样式：

.list-item {
  padding: 10px;
  cursor: pointer;
}

.list-item.selected {
  background-color: #007cba;
  color: white;
}

JavaScript 实现单选效果：

const items = document.querySelectorAll('.list-item');
items.forEach(item => {
  item.addEventListener('click', function() {
    // 先移除所有选中状态
    items.forEach(i => i.classList.remove('selected'));
    // 给当前点击项添加选中类
    this.classList.add('selected');
  });
});

如果是多选，去掉移除部分即可：

item.addEventListener('click', function() {
  this.classList.toggle('selected');
});

结合语义化结构和键盘支持（可选优化）

为了更好的可访问性，建议将可点击的列表项用 button 或加 tabindex，并支持回车或空格触发。

例如：

可聚焦的选项

再在 JS 中监听 keydown 事件处理键盘操作。

基本上就这些。想快速反馈用 :active，想持久选中就用 JS 控制 class。不复杂但容易忽略细节。