在网页开发中，常常会遇见很多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
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
/* 总体大盒子 */
#box{
width: 400px;
height: 300px;
border: 1px solid gray;
margin: 100px auto auto;
}
/* 大盒子中头部小盒子ul */
#hd{
height: 45px;
}
/* 小盒子ul中li标签 */
#hd li{
height: 45px;
display: inline-block;
line-height: 45px;
width: 98px;
text-align: center;
border: 1px solid gray;
float: left;
list-style: none;
}
/* 大盒子中主体小盒子 */
#bd{
height: 255px;
}
/* 各个小版块 */
#bd div{
height: 100%;
display: none; } #bd,#hd .current{
display: block;
background-color: #ECEEF1;
}
</style> </head>
<body>
<div id="box">
<ul id="hd">
<li class="current">体育</li>
<li>娱乐</li>
<li>新闻</li>
<li>综合</li>
</ul> <div id="bd">
<div class="current" style="display: block;">这是体育频道</div>
<div>这是娱乐频道</div>
<div>这是新闻频道</div>
<div>这是综合频道</div>
</div>
</div>
<!-- 插入JS代码 -->
<script>
// 思路:
// 1.实现标题小模块的Tab切换
// 1.1 首先给所有的标题小模块清除样式
// 1.2 给鼠标移入的标题小模块添加样式
// 2.实现主体模块和标题小模块之间的绑定
// 2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
// 2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容
var hd=document.getElementById('hd');
//获得所有的标题小模块
var lis=hd.getElementsByTagName('li');
//获得所有的主体模块
var bd=document.getElementById('bd');
var divs=bd.getElementsByTagName('div');
//给所有的li注册事件
for(var i=0;i<lis.length;i++){
var li=lis[i];
li.setAttribute('index',i);
li.onmouseover=function(){
//每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
for(var i=0;i<lis.length;i++){
lis[i].className="";//所有模块样式清除
this.className="current";
//鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
divs[i].className="";
divs[i].style.display="none"; //对当前的模块的进行操作
var index=parseInt(this.getAttribute('index'));
divs[index].className="current";
divs[index].style.display="block";
}
}
}
</script>
</body>
</html>