在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。
效果图如下：
实现思路：
1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加JS时候，盒子竖直排列（很丑很丑）
2.添加JS代码
2.1 首先实现标题的Tab效果
2.1.1获取所有的li元素，注册鼠标进入事件，在鼠标进入事件中，清除所有的li元素样式，然后给当前li元素添加样式
2.1.2在注册事件前，给所有的li元素通过setAttribute()方法给li挨个添加index属性，记录标签的序号，方便和主体div对应
2.2 实现所有的主体模块Tab效果
2.2.1 获取所有的主体DIV，与标签进行绑定，通过getAttribute()方法获得当前标签的索引，通过该索引得到DIV集合中与标签对应的div
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 padding: 0px; 9 margin: 0px; 10 } 11 /* 总体大盒子 */ 12 #box{ 13 400px; 14 height: 300px; 15 border: 1px solid gray; 16 margin: 100px auto auto; 17 } 18 /* 大盒子中头部小盒子ul */ 19 #hd{ 20 height: 45px; 21 } 22 /* 小盒子ul中li标签 */ 23 #hd li{ 24 height: 45px; 25 display: inline-block; 26 line-height: 45px; 27 98px; 28 text-align: center; 29 border: 1px solid gray; 30 float: left; 31 list-style: none; 32 } 33 /* 大盒子中主体小盒子 */ 34 #bd{ 35 height: 255px; 36 } 37 /* 各个小版块 */ 38 #bd div{ 39 height: 100%; 40 display: none; 41 42 } 43 44 #bd,#hd .current{ 45 display: block; 46 background-color: #ECEEF1; 47 } 48 </style> 49 50 </head> 51 <body> 52 <div id="box"> 53 <ul id="hd"> 54 <li class="current">体育</li> 55 <li>娱乐</li> 56 <li>新闻</li> 57 <li>综合</li> 58 </ul> 59 60 <div id="bd"> 61 <div class="current" style="display: block;">这是体育频道</div> 62 <div>这是娱乐频道</div> 63 <div>这是新闻频道</div> 64 <div>这是综合频道</div> 65 </div> 66 </div> 67 <!-- 插入JS代码 --> 68 <script> 69 // 思路: 70 // 1.实现标题小模块的Tab切换 71 // 1.1 首先给所有的标题小模块清除样式 72 // 1.2 给鼠标移入的标题小模块添加样式 73 // 2.实现主体模块和标题小模块之间的绑定 74 // 2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引 75 // 2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容 76 var hd=document.getElementById('hd'); 77 //获得所有的标题小模块 78 var lis=hd.getElementsByTagName('li'); 79 //获得所有的主体模块 80 var bd=document.getElementById('bd'); 81 var divs=bd.getElementsByTagName('div'); 82 //给所有的li注册事件 83 for(var i=0;i<lis.length;i++){ 84 var li=lis[i]; 85 li.setAttribute('index',i); 86 li.onmouseover=function(){ 87 //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式 88 for(var i=0;i<lis.length;i++){ 89 lis[i].className="";//所有模块样式清除 90 this.className="current"; 91 //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式 92 divs[i].className=""; 93 divs[i].style.display="none"; 94 95 //对当前的模块的进行操作 96 var index=parseInt(this.getAttribute('index')); 97 divs[index].className="current"; 98 divs[index].style.display="block"; 99 } 100 } 101 } 102 </script> 103 </body> 104 </html>