最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现tab选项卡切换功能的教程
时间:2017-01-16 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
*{ 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; }
menu1 menu2 menu3
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[i].index=i; oMenu[i].onclick=function(){ varthisIndex=this.index; for(varj=0;j oMain[j].style.display="none"; oMain[thisIndex].style.display="block"; } oLine.style.left=thisIndex*33.33+"%"; } } } |