效果
1.页面布局
分别设置五个标签，给五个标签写序号，移到标签上获取标签序号显示对应的div
1）设置一个整个的div包含所有的标签和所有内容
2）标签
<ul><li style="background: blanchedalmond;">快餐</li><li style="background: burlywood;">面食</li><li style="background: cyan;">甜点</li></ul>
3）内容
<div class="main" style="background: blanchedalmond;"></div><div class="main" style="background: burlywood;"></div><div class="main" style="background: cyan;"></div>
2.页面样式
1）设置整个tab的大小边框
#tab{width: 400px;height: 300px;border: blue 1px solid;margin: 30px auto;}
2）标签浮动\清除标签原点
#tab ul li{float: left;width: 133px;height: 30px;list-style: none;text-align: center;line-height: 30px;}
3）设置内容部分,加绝对定位避免出现三个内容框，设置内容部分隐藏
.main{width: 390px;height: 250px;margin-left: 5px;margin-top: 40px;display: none;position: absolute;}
3.给标签加移入事件，实现tab切换
1）获取id进行 定义
2）利用循环给li分别加序号
for(var i=0;i<list.length;i++){ list[i].xuhao=i;}
3）鼠标移入事件：获取li的序号，显示对应序号的div
list[i].onmouseover=function(){var c=this.xuhao;cn[c].style.display="block"}
4)保证tab可以循环使用,每执行一次都先让其他都隐藏在显示对应的
for(var i=0;i<3;i++){cn[i].style.display="none";}
4.源码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{padding: 0;margin: 0;}#tab{width: 400px;height: 300px;border: blue 1px solid;margin: 30px auto;}/*标签浮动\清除原点*/#tab ul li{float: left;width: 133px;height: 30px;list-style: none;text-align: center;line-height: 30px;}/*设置内容部分,加绝对定位避免出现三个内容框*/.main{width: 390px;height: 250px;margin-left: 5px;margin-top: 40px;display: none;position: absolute;}</style></head><body><div id="tab"><!--标签--><ul><li style="background: blanchedalmond;">快餐</li><li style="background: burlywood;">面食</li><li style="background: cyan;">甜点</li></ul><!--内容--><div class="main" style="background: blanchedalmond;display: block;"></div><div class="main" style="background: burlywood;"></div><div class="main" style="background: cyan;"></div></div><script>var tab=document.getElementById("tab");var list=tab.getElementsByTagName("li");var cn=tab.getElementsByClassName("main");//加序号for(var i=0;i<list.length;i++){list[i].xuhao=i;//鼠标移入事件list[i].onmouseover=function(){//获得当前移入的li序号var c=this.xuhao;for(var i=0;i<3;i++){cn[i].style.display="none";}// 对应序号的内容显示cn[c].style.display="block"}}</script></body></html>
