首页li标签实现点击变色，不点击就恢复颜色

li标签实现点击变色，不点击就恢复颜色

时间: 2024-03-09 19:46:36 浏览: 106

您可以使用JavaScript来实现这个效果。首先，您需要给需要点击变色的`li`元素添加一个事件监听器，监听鼠标的点击事件。在事件处理函数中，您可以使用JavaScript修改`li`元素的样式，改变`li`元素的颜色。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>点击变色</title> <style> li { cursor: pointer; } .active { background-color: red; } </style> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { lis[i].addEventListener('click', function() { if (this.classList.contains('active')) { this.classList.remove('active'); } else { this.classList.add('active'); } }); } </script> </body> </html> ``` 在上述代码中，我们给`li`元素添加了一个`cursor: pointer;`的样式，以使其在鼠标悬停时显示为手型。然后，我们定义了一个名为`active`的样式，用于表示选中状态下的颜色。在JavaScript中，我们获取了所有`li`元素，并给它们依次添加了点击事件监听器。在事件处理函数中，我们检查当前`li`元素是否包含`active`这个类名，如果包含，则将其移除；否则将其添加。这样就可以实现点击变色的效果了。

阅读全文