✨ `ul li 点击事件切换颜色` 🎨
发布时间：2025-03-22 19:56:48来源：
导读 在网页设计中，使用JavaScript实现列表项（`ul li`）点击后切换颜色是一个非常实用的功能。不仅能让页面更有趣，还能提升用户体验！例如，...
在网页设计中，使用JavaScript实现列表项（`ul li`）点击后切换颜色是一个非常实用的功能。不仅能让页面更有趣，还能提升用户体验！例如，当你点击某个列表项时，它会从白色变成蓝色，再次点击则恢复原色，这种交互效果能瞬间吸引用户的注意力。
首先，我们需要用HTML创建一个简单的无序列表，比如：“任务清单”或“购物清单”。接着，在CSS里定义初始样式，比如让所有列表项默认为白色背景。然后，通过JavaScript监听每个`li`元素的点击事件。当用户点击时，利用`classList.toggle()`方法轻松切换预设的“active”类，从而改变颜色。例如，添加一个`.active { background-color: 4CAF50; }`的样式规则，就能实现点击变绿的效果。
这种方法简单高效，适配各种设备和浏览器，是前端开发中的基础技能之一。试着自己动手试试吧！💡
版权声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
