JavaScript中for 循环的onclick事件

最新推荐文章于 2022-06-22 17:52:48 发布

oh panda

最新推荐文章于 2022-06-22 17:52:48 发布

阅读量793

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/aha_xigua/article/details/112797246

版权

本文介绍了一种通过JavaScript为HTML列表项（li元素）添加和移除CSS类以实现样式切换的方法。当用户点击列表项时，当前选中的项会获得激活状态样式，而其他项则恢复默认样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type='text/css'>
        .active {
            color: rgb(189, 55, 55);
        }
    </style>
</head>
<body>
    <ul>
        <li class='a'>a</li>
        <li class='b'>b</li>
        <li class='c'>c</li>
    </ul>
    <script type='text/javascript'>
        var Li = document.querySelectorAll('li');
        for (var i = 0; i < Li.length; i++) {
            Li[i].onclick = function() {
                for (var i = 0; i < Li.length; i++) {
                    Li[i].className = '';
                }
                this.className = 'active';
            }
        }
    </script>
</body>
</html>