<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100%;
height:auto;
border-bottom:1px #e2e2e2 solid;
box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
}
#title{
width:100%;
height:40px;
line-height:40px;
border-right:1px #e2e2e2 solid;
border-bottom:1px #e2e2e2 solid;
font-size:0;
}
#title div{
width:95px;
line-height:40px;
text-align:center;
display:inline-block;
font-size:16px;
}
#title .active{
background:#fff;
line-height:40px;
border-top:1px #e2e2e2 solid;
border-left:1px #e2e2e2 solid;
border-right:1px #e2e2e2 solid;
}
#cont{
width:calc(100% - 1px);
height:500px;
border-left:1px #e2e2e2 solid;
border-right:1px #e2e2e2 solid;
border-bottom:1px #e2e2e2 solid;
}
#cont div{
padding:20px;
display: none;
}
</style>
</head>
<script>
window.onload=function(){
var Tit=document.getElementById('title');
var oDiv1=Tit.getElementsByTagName('div');
var Cont=document.getElementById('cont');
var oDiv2=Cont.getElementsByTagName('div');
for(var i=0;i<oDiv1.length;i++){
oDiv1[i].index=i;
oDiv1[i].onclick=function(){
for(var j=0;j<oDiv1.length;j++){
oDiv1[j].className='';
oDiv2[j].style.display='none'
}
this.className='active';
oDiv2[this.index].style.display='block';
}
}
}
</script>
<body>
<div id="div1">
<div id="title">
<div class="active">教育</div>
<div>培训</div>
<div>招聘</div>
<div>出国</div>
</div>
<div id="cont">
<div style="display: block">1111111</div>
<div>2222222</div>
<div>3333333</div>
<div>4444444</div>
</div>
</div>
</body>
</html>
简洁风格的Tab
最新推荐文章于 2021-03-26 16:00:32 发布