首页 li标签怎么实现点击事件后变样式颜色

li标签怎么实现点击事件后变样式颜色

时间: 2024-04-10 21:27:45 浏览: 116

Angular中点击li标签实现更改颜色的核心代码

点击ng-repeat遍历后的li标签，实现更改border颜色； html代码： <ul ng-if=params.questionTypeId> <li class=gamePre-def xss=removed ng-click='li_click($index)' nng-class='{focus: $index == focus}'> {{word}}</li> </ul> js代码： $scope.li_click = function (i) { $scope.focus = i; }; 说明： ①在< li>元素的单击

您可以通过使用JavaScript来实现点击li标签后改变样式颜色的效果。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .active { color: red; /* 设置点击后的样式颜色 */ } </style> </head> <body> <ul> <li onclick="changeColor(this)">列表项1</li> <li onclick="changeColor(this)">列表项2</li> <li onclick="changeColor(this)">列表项3</li> </ul> <script> function changeColor(element) { var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { lis[i].classList.remove("active"); // 移除所有li标签的active类名 } element.classList.add("active"); // 为点击的li标签添加active类名 } </script> </body> </html> ``` 在上述代码中，我们为每个li标签添加了一个`onclick`事件，当点击li标签时，会调用`changeColor`函数。该函数会先移除所有li标签的`active`类名，然后为当前点击的li标签添加`active`类名。在CSS样式中，我们为`.active`类设置了红色的文字颜色。这样就实现了点击li标签后改变样式颜色的效果。

阅读全文