<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排它思想案例</title>
<style>
.color {
color: white;
background-color: red;
}
.skyblue {
color: skyblue;
}
</style>
</head>
<body>
<button class="skyblue">你来点我</button>
<button class="skyblue">你来点我</button>
<button class="skyblue">你来点我</button>
<button class="skyblue">你来点我</button>
<button class="skyblue">你来点我</button>
<button class="skyblue">你来点我</button>
</body>
</html>
<script>
// 实现点击切换类名样式
let btnArr = document.getElementsByTagName('button');
for (let i = 0; i < btnArr.length; i++) {
btnArr[i].onclick = function (){
//排他思想，点击的时候把所有的类名恢复初始样式，后再设置点击的新的样式
for (let j=0;j<btnArr.length;j++){
btnArr[j].setAttribute('class','skyblue');
}
this.setAttribute('class','color');
}
}
</script>
