<!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
