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

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

P粉602998670

发布： 2025-12-20 15:41:02

原创

487人浏览过

答案：通过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 样式：

Prisma

Prisma是一款照片编辑工具，用户可以轻松地将照片转换成数字艺术。

查看详情

.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列表项点击选中效果怎么做_使用active伪类或js添加样式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中BFC是什么意思 CSS设计模式之ITCSS的介绍 css如何实现自定义的属性 css中BFC布局规则是什么 css中z-index属性