js实现tab选项卡切换功能
话不多说，请看代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
.menu{
position:relative;
display:flex;
height:20px;
justify-content:space-around;
}
.menuspan{
display:block;
width:100%;
height:100%;
text-align:center;
}
.menu.line{
position:absolute;
bottom:0;
left:0;
width:33.33%;
height:1px;
background:red;
-webkit-transition:all.2s;
transition:all.2s;
}
.main{
position:relative;
width:100%;
}
.mainli{
position:absolute;
top:0;
left:0;
}
.hide{
display:none;
}
.show{
display:block;
}
</style>
</head>
<body>
<divclass="menu">
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<divclass="line"></div>
</div>
<ulclass="main">
<li>menu1</li>
<liclass="hide">menu2</li>
<liclass="hide">menu3</li>
</ul>
<script>
window.onload=function(){
varoMenu=document.querySelectorAll(".menuspan");
varoMain=document.querySelectorAll(".mainli");
varoLine=document.querySelector(".line");
for(vari=0;i<oMenu.length;i++){
oMenu[i].index=i;
oMenu[i].onclick=function(){
varthisIndex=this.index;
for(varj=0;j<oMain.length;j++){
oMain[j].style.display="none";
oMain[thisIndex].style.display="block";
}
oLine.style.left=thisIndex*33.33+"%";
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！