一组数组元素，点击其中某一个数组元素，被点击的那个元素就会变色或者放大，也就是样式有修改，这是我们经常用到的功能，我们经常实现这个功能用到的一般都是两个循环，第一个循环给每个元素绑定事件，第二个循环为所有元素样式变成默认。
var headCel =document.getElementById('headerBar').children; for(var i=0;i<headCel.length;i++){ headCel[i].onclick = function(){ for (var j =0;j<headCel.length;j++){ headCel[j].style.color = '#000'; } this.style.color = "#E5502E"; } }
其实用原生JS实现这个功能还有一种更简单的方法：
//点击头部小导航条绑定事件 var headli = headUl.children; var oldindex =0 ; for (var k = 0; k < headli.length; k++) { headli[k].index=k; //切换栏目时 headli[k].onclick = function () { headli[oldindex].style.color = '#212121'; this.style.color = "#E5502E"; oldindex=this.index; } }
定义一个oldindex，为刚刚点击元素的Index，初始值为默认选择的index，一般为0，在每次不同元素点击后，将该被点击元素的Index赋值给定义的oldindex，在发生下一次点击事件的时候，就让上一次被点的元素elArr[oldindex]的样式恢复到原样，这次被点击的元素更改样式。