3个蓝色的box,点击其中任意一个变黄色,再点击其他任意一个变黄色同时其他都回复蓝色,
点击的时候给当前一个box添加一个class,其它两个把class去了,如
<style>
.box{background:blue}
.box.active{background:yellow}
</style>
<div class="box active"></div>
<div class="box"></div>
<div class="box"></div>
原生js
var boxArr = document.getElementsByClassName('box');
for (var i = 0; i < boxArr.length; i++) {
boxArr[i].onclick = function() {
for (var j = 0; j < boxArr.length; j++) {
boxArr[j].className = 'box'; // 先全部恢复默认class
}
this.className = 'box active'; // 再给当前点击添加class
}
}
用jQuery的话要更方便点