js--动态绑定(凤凰网的轮播导航)

样例图片：

下面是html代码

	<style>*{margin: 0; padding: 0;}.ziXunJS{ width:360px; height:100px; position:relative; overflow:hidden}.ziXunJS ul{ width:100%; height:30px; background:url(images/bg.png); background-position:-0px -1600px;}.ziXunJS ul li{ list-style:none; float:left; width:40px; line-height:30px; text-align:center;}.ziXunJS ul li a{ text-decoration:none; font-size:14px; color:#004276}.ziXunJS img{ width:360px; height:250px;}.ziXunJS a.title{ position:absolute; bottom:0px; left:0px; color:#FFF; background:rgba(0,0,0,0.5); width:100%; height:40px; line-height:40px; padding-left: 12px; letter-spacing: 1px}.ziXunJS ul li.xiaoWangWang{ background:url(images/bg.png); background-position:-500px -1600px; }.ziXunJS ul li.xiaoWangWang a{ color:#FFF; display: block}.tabs{ width: 360px; height: 30px;}.tabs .tab:first-child{ display: block;}.tabs .tab{ display: none; text-align: center; width: 100%; height: 100%;}</style><div class="ziXunJS"><ul><li  class="xiaoWangWang"><a href="http://www.baidu.com">咨询</a></li><li ><a href="http://www.baidu.com">娱乐</a></li><li ><a href="http://www.baidu.com">体育</a></li><li ><a href="http://www.baidu.com">汽车</a></li><li ><a href="http://www.baidu.com">时尚</a></li><li ><a href="http://www.baidu.com">军事</a></li><li ><a href="http://www.baidu.com">房产</a></li><li ><a href="http://www.baidu.com">视频</a></li><li ><a href="http://www.baidu.com">游戏</a></li></ul><div class="tabs"><div class="tab">咨询咨询咨询咨询咨询咨询</div><div class="tab">娱乐娱乐娱乐娱乐娱乐娱乐</div><div class="tab">体育体育体育体育体育体育</div><div class="tab">汽车汽车汽车汽车汽车汽车</div><div class="tab">时尚时尚时尚时尚时尚时尚</div><div class="tab">军事军事军事军事军事军事</div><div class="tab">房产房产房产房产房产房产</div><div class="tab">视频视频视频视频视频视频</div><div class="tab">游戏游戏游戏游戏游戏游戏</div></div></div>

下面是js代码,用jQuery会更简洁

	<script>//先获得所有的li标签,并为其设置index值var lis = document.querySelectorAll('.ziXunJS ul li');for(var i=0; i<lis.length; i++){lis[i].setAttribute("index",i);}for(var li of lis){ //foreach循环遍历所有的lili.onmouseover = function(){var tabs = document.querySelectorAll('.tabs div');  //获得tabs下所有的divvar index = this.getAttribute('index'); //获取到li的index值//需求：鼠标移入对应的框变色(这里是背景图)for(var ll of lis){ll.className=' ';   //再添加xiaoWangWang这个类时需要先解绑}this.className='xiaoWangWang';for(var j=0; j<tabs.length; j++){   //遍历tabs所有的div，当j等于index的时候,对应的div显示if(j == index){tabs[j].style.display="block";}else{tabs[j].style.display="none";}}}}</script>