1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;} 8 ul{list-style:none;} 9 a{color:#000;text-decoration:none;} 10 .tab-tit li.selected{border-top:2px solid red;} 11 .tab-tit li.selected a{color:red;font-weight:bold;} 12 #tab{width:440px;height:300px;margin:100px;overflow:hidden;} 13 .tab-tit{width:440px; height:40px; border-top: 1px #e5e5e5 solid;} 14 .tab-tit li{float:left;margin-right:10px;} 15 .tab-tit li a{display:block;width:110px;height:40px;line-height:40px;padding:0 5px;text-align:center;} 16 17 .tab-con{} 18 .tab-con ul{padding:15px;display:none;} 19 .tab-con ul li{line-height:28px;} 20 </style> 21 <script> 22 window.onload=function () 23 { 24 var tab=document.getElementById('tab'); //获取id为div1的元素 25 var tit=tab.getElementsByClassName("tab-tit"); 26 var lis=tit[0].getElementsByTagName("li"); 27 28 var con=document.getElementsByClassName("tab-con"); 29 var box=con[0].getElementsByTagName("ul"); 30 console.log(box); 31 for(var i=0;i<lis.length;i++) 32 { 33 lis[i].index=i; //将I赋值给每个input元素的索引值 34 lis[i].onmouseover=function () 35 { 36 for(var i=0;i<lis.length;i++) //将所有input的样式清空 37 { 38 lis[i].className=''; 39 box[i].style.display='none'; 40 } 41 this.className='selected'; //将选择的元素添加class 42 //alert(this.index); 43 box[this.index].style.display='block'; //将选择项相应的div元素显示出来 44 }; 45 } 46 }; 47 </script> 48 </head> 49 50 <body> 51 <div id="tab"> 52 53 <ul class="tab-tit"> 54 <li class="selected"><a href="#">教育</a></li> 55 <li><a href="#">培训</a></li> 56 <li><a href="#">招生</a></li> 57 </ul> 58 59 <div class="tab-con"> 60 <ul style="display:block;"> 61 <li><a href="#">参观"铭记光辉历史开创强军伟业"展览</a></li> 62 <li><a href="#">中国侦察船"监视"美澳军演? 专家:平常心看待</a></li> 63 <li><a href="#">全国15个副省级城市的"副市级"是什么级？</a></li> 64 <li><a href="#">八达岭动物园回应游客遭熊扒窗:无法证实</a></li> 65 </ul> 66 67 <ul> 68 <li><a href="#">222222222222222222222222</a></li> 69 <li><a href="#">中国侦察船"监视"美澳军演? 专家:平常心看待</a></li> 70 <li><a href="#">全国15个副省级城市的"副市级"是什么级？</a></li> 71 <li><a href="#">八达岭动物园回应游客遭熊扒窗:无法证实</a></li> 72 </ul> 73 74 <ul> 75 <li><a href="#">33333333333333333333333333333333333</a></li> 76 <li><a href="#">中国侦察船"监视"美澳军演? 专家:平常心看待</a></li> 77 <li><a href="#">全国15个副省级城市的"副市级"是什么级？</a></li> 78 <li><a href="#">八达岭动物园回应游客遭熊扒窗:无法证实</a></li> 79 </ul> 80 81 </div> 82 </div> 83 </body> 84 </html>
效果图：
