首页 > 文章 > 前端

CSS列表项点击选中效果怎么实现

时间：2025-12-26 11:36:45 481浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《CSS列表项点击选中效果实现方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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

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

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

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

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

例如：

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

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

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

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

示例代码：

<ul id="myList">
  <li class="list-item">选项 1</li>
  <li class="list-item">选项 2</li>
  <li class="list-item">选项 3</li>
</ul>

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，并支持回车或空格触发。

例如：

<li class="list-item" tabindex="0">可聚焦的选项</li>

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

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

理论要掌握，实操不能落！以上关于《CSS列表项点击选中效果怎么实现》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

CSS 列表项