<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } li{ display: inline-block; width: 130px; height: 40px; background-color: burlywood; text-align: center; font-weight: bold; line-height: 30px; cursor: pointer; } div{ width: 400px; height: 250px; background-color: #829B1A; display: none; } .content{ display: block; } .tab{ background-color: #829B1A; } </style> <body> <ul> <li class="tab">体育</li> <li>娱乐</li> <li>军事</li> </ul> <div class="content">这里是体育频道</div> <div id="">这里是娱乐频道</div> <div id="">这里是军事频道</div> </body> </html> <script type="text/javascript"> //给每个li绑定鼠标单击事件,单击的时候修改li和div的class的值 var lis = document.getElementsByTagName('li'); var divs = document.getElementsByTagName('div'); for (var i=0;i<lis.length;i++) { lis[i].a = i;//为每个li添加一个属性，这个属性表示li的下标 lis[i].onclick = function(){ //alert(this.a); for (var j=0;j<lis.length;j++) { //当前点击的li的下标是this.a if(j == this.a){ lis[j].className = 'tab'; divs[j].className = 'content' } else{ lis[j].className = ''; divs[j].className = '' } } }; } </script>
