效果
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>
![没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)