我们有一个ul，ul里面有五个li，都是宽100px，高50px，背景颜色为粉色：
image.png
现在我们想通过点击其中的li，让这个被点击的li宽度变为200px，颜色变为天蓝色，如果我们点击后依次去换每个属性，实在太麻烦了。所以我们可以事先把点击后的样式写在一个类名中，点击元素时直接更换它的class名即可。
通过css先写好点击后的效果：
.active{ /*点击后的样式*/
background: skyblue;
width:200px;
}
js代码：
var myLi = document.getElementsByTagName("li"); //获取页面中全部li
for(var i=0;i<myLi.length;i++){ //依次给每个li设置点击事件
myLi[i].onclick = function(){
this.className="active"; //更换class名为“active”
}
}
我们点击第一个和第三个li试一试，结果如下图所示，可以看到点击后的li都被改变了样式。如果不是要点击，而是滑入的话，把onclick事件改为onmouseover事件就可以啦。
