<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab{
400px;
height: 600px;
margin: 100px auto;
}
.tab-head{
height: 100px;
background-color: aquamarine;
}
.tab-head div{
border: 1px solid red;
48%;
height: 100px;
text-align: center;
line-height: 100px;
display: inline-block;
color: brown;
font-size: 20px;
font-weight: bold;
}
.tab-head div.active{
background: blueviolet;
}
.tab-body div{
height: 500px;
display: none;
background: blueviolet;
}
.tab-body div.active{
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-head">
<div id="head1"class="active" onclick="tab(1)">首页</div>
<div id="head2" onclick="tab(2)">菜单</div>
</div>
<div class="tab-body">
<div id="body1" class="active">1111</div>
<div id="body2">222</div>
</div>
</div>
<script>
// 封装函数
function $(id){
return document.getElementById(id);
}
function tab(num){
for(var i = 1; i<=2;i++){
//通过id选择元素 将它的class改变
$('head'+i).className="";
$('body'+i).className="";
}
//通过参数将它们连起来
$('head'+num).className ='active';
$('body'+num).className = 'active';
}
</script>
</body>
</html>