<style type="text/css"> *{margin:0;padding:0;} .demonstrate{padding:20px;} .description h3{color:#900;padding:8px 0;} .description p{ line-height:23px;} #demo{width:550px;padding:5px;border:1px #f00 solid;float:left;} #demo a{width:100px; height:100px; background:#9CF;float:left;margin:5px;} #demo >a:hover,#demo >a.active{ color:#fff;font-weight:bold;background:#F00;} </style> <script type="text/javascript"> window.onload=function(){ var demo=document.getElementById("demo"); var children=demo.getElementsByTagName("a"); var num=0; for(var i=0;i<children.length;i++){ children[i].index=i;//保留当前点击项所在索引值 children[i].onclick=function(){ children[num].className=""; this.className="active"; num=this.index; } } } </script> <!--实例效果文字描述，可删--> <div class="demonstrate"> <div class="description"> <h3>实现jq遍历元素更改class属性的原生js写法</h3> <p>实现效果：点击当前项添加class名:active,其它同级项移除该class名</p> <p>实现原理：设置一变量（实例是num）用于记录当前点击项的所在索引值，当发生点击事件时先去掉原先记录到索引值对应项的class名,再为当前点击项添加class名！关键是点击项所在索引值的记录！</p> </div> <!--实例效果文字描述，结束--> <div id="demo"> <a href="#" class="active">item1</a> <a href="#">item2</a> <a href="#">item3</a> <a href="#">item4</a> <a href="#">item5</a> <a href="#">item6</a> <a href="#">item7</a> <a href="#">item8</a> <a href="#">item9</a> <a href="#">item10</a> </div> </div>