JS实现点击循环切换显示的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    .button{
    width: 100px;
    height: 50px;
    border-radius: 50px;
    float: left;
    background-color: pink;
    margin: 10px;
}
.deep{
    background-color: deeppink;
}
</head>
<body>
<div class="background">
    <ul style="list-style: none" >
        <li class="button"></li>
        <li class="button"></li>
        <li class="button"></li>
        <li class="button"></li>
        <li class="button"></li>
    </ul>
</div>
<script >
var b1=document.getElementsByTagName('li');
console.log(b1);

for (var i=0;i<b1.length;i++){
    var obj = b1[I];
    b1[i].onclick = function () {
// 取消之前活跃的li
        obj.classList.remove('deep');
// 将自身设置为活跃状态
        this.classList.add('deep');
// 更新获取的对象
        obj = this;
        };
}
</script>
</body>
</html>

效果图：

鼠标未点击前：

4BBBFB72-7569-458C-A03E-348DFC59A251.png

鼠标点击后：

B260FCFF-7826-4CF5-A9FC-D1F07D53CD7F.png

鼠标再次点击后：

DC268332-E7DA-4B06-924C-B0A13DFA5D06.png

最后编辑于：2018.10.15 15:40:44

JS实现点击循环切换显示的方法

效果图：

推荐阅读更多精彩内容