<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" charset="UTF-8" />
<title> js实现多项滑动门选项卡特效</title>
<style media="screen" type="text/css">
</style>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
list-style: none;
}
#tab_zzjs_{
width:100%;
height:40px;
background:#2891f8;
border-top:1px solid #666;
}
#tab_zzjs_ ul{
width:100%;
height:100%;
text-align: center;
line-height:40px;
}
#tab_zzjs_ ul li{
display: inline;
text-align: center;
margin:0px 80px;
color:#fff;
}
#tab_zzjs_ ul li:hover{
color:red;
}
.ctt_zzjs_net{
width:100%;
height:50px;
position: relative;
border:1px solid #000;
}
.ctt_zzjs_net>div{
position: absolute;
width:100%;
height:100%;
left:0px;
top:0px;
}
.dis_zzjs_net{
display: block;
}
.undis_zzjs_net{
display: none;
}
#tab_zzjs_ .hovertab_zzjs{
color:darkgreen;
}
</style>
</head>
<body>
<div id="tab_zzjs_" class="tab_zzjs_">
<ul>
<li id="tab_zzjs_1" class="hovertab_zzjs">一、内容</li>
<li id="tab_zzjs_2" class="nor_zzjs">二、内容</li>
<li id="tab_zzjs_3" class="nor_zzjs">三、内容</li>
<li id="tab_zzjs_4" class="nor_zzjs">四、内容</li>
<li id="tab_zzjs_5" class="nor_zzjs">五、内容</li>
<li id="tab_zzjs_6" class="nor_zzjs">六、内容</li>
</ul>
</div>
<div class="ctt_zzjs_net">
<div class="dis_zzjs_net" id="tab_zzjs_01"><a href="#">一、内容</a>，测试内容一！</div>
<div class="undis_zzjs_net" id="tab_zzjs_02"><a href="#">二、内容</a>，测试内容二！</div>
<div class="undis_zzjs_net" id="tab_zzjs_03"><a href="#">三、内容</a>，测试内容三！</div>
<div class="undis_zzjs_net" id="tab_zzjs_04"><a href="#">四、内容</a>，测试内容四！</div>
<div class="undis_zzjs_net" id="tab_zzjs_05"><a href="#">五、内容</a>，测试内容五！</div>
<div class="undis_zzjs_net" id="tab_zzjs_06"><a href="#">六、内容</a>，测试内容六！</div>
</div>
</div>
<script type="text/javascript" language="javascript">
var li=document.querySelectorAll('#tab_zzjs_ ul li');
var main = document.querySelectorAll('.ctt_zzjs_net>div');
for(let i=0;i<li.length;i++){
li[i].onclick=function(){
for(var j=0;j<li.length;j++){
li[j].style.color='#darkgreen';
main[j].className='undis_zzjs_net';
}
this.style.color='#fff';
main[i].className='dis_zzjs_net';
}
}
</script>
</body>
</html>
