<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab{
400px;
height: 600px;
margin: 100px auto;
}
.tab-head div{
height: 100px;
49%;
background: aqua;
display: inline-block;
text-align: center;
line-height: 100px;
}
.tab-head div.active{
background: blue;
}
.tab-body div{
height: 500px;
background: blueviolet;
display: none;
}
.tab-body div.active{
display:block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-head">
<div class="head active"onclick="tab(0)">首页</div>
<div class="head" onclick="tab(1)">菜单</div>
</div>
<div class="tab-body">
<div class="body active">1111</div>
<div class="body">2222</div>
</div>
</div>
<script type="text/javascript">
//方法：用class选择器选择出来 改变class值
var head = document.getElementsByClassName('head');
var body = document.getElementsByClassName('body');
function tab(num){
for(var i=0;i<=1;i++){
head[i].className='head';
body[i].className='body';
}
head[num].className='head active';
body[num].className='body active';
}
</script>
</body>
</html>