js实现tab选项卡切换功能

2019-11-19 17:58:02

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="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;  }  .menu span{   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%;  }  .main li{   position: absolute;   top:0;   left:0;  }  .hide{   display: none;  }  .show{   display: block;  } </style></head><body> <div class="menu">   <span>menu1</span>   <span>menu2</span>   <span>menu3</span>   <div class="line"></div> </div> <ul class="main">  <li>menu1</li>  <li class="hide">menu2</li>  <li class="hide">menu3</li> </ul><script> window.onload=function(){  var oMenu=document.querySelectorAll(".menu span");  var oMain=document.querySelectorAll(".main li");  var oLine=document.querySelector(".line");  for(var i=0;i<oMenu.length;i++){   oMenu[i].index=i;   oMenu[i].onclick=function(){    var thisIndex=this.index;    for(var j=0;j<oMain.length;j++){     oMain[j].style.display="none";     oMain[thisIndex].style.display="block";    }    oLine.style.left=thisIndex*33.33+"%";   }  } }</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：js仿百度音乐全选操作

下一篇：js制作可以延时消失的菜单