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

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

时间: 2024-03-09 09:46:35 浏览: 17

您可以使用JavaScript来实现这个效果。首先，您需要给需要点击变色的元素添加一个事件监听器，监听鼠标的点击事件。在事件处理函数中，您可以使用JavaScript修改元素的样式，改变元素的颜色。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>点击变色</title> <style> .box { width: 100px; height: 100px; background-color: gray; margin: 50px auto; } </style> </head> <body> <div class="box"></div> <script> var box = document.querySelector('.box'); box.addEventListener('click', function() { if (box.style.backgroundColor === 'red') { box.style.backgroundColor = 'gray'; } else { box.style.backgroundColor = 'red'; } }); </script> </body> </html> ``` 在上述代码中，我们给`div`元素添加了一个类名`box`，并在JavaScript中获取该元素。然后，我们给该元素添加了一个点击事件监听器，当用户点击该元素时，会触发事件处理函数。在事件处理函数中，我们检查当前元素的背景颜色，如果是红色，就将其改为灰色；否则将其改为红色。这样就可以实现点击变色的效果了。