喜欢琢磨,给大家分享小编自己封装的仿layui的选项卡.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sub-tab组件-学习从模仿开始</title> 6 </head> 7 <style> 8 *{ 9 list-style: none; 10 padding: 0; 11 margin: 0; 12 } 13 .sub-tab{ 14 15 } 16 .sub-tab .sub-tab-title{ 17 position: relative; 18 left: 0; 19 height: 40px; 20 white-space: nowrap; 21 font-size: 0; 22 border-bottom-width: 1px; 23 border-bottom-style: solid; 24 border-color: #e6e6e6; 25 } 26 .sub-tab .sub-tab-title li{ 27 display: inline-block; 28 vertical-align: middle; 29 font-size: 14px; 30 transition: all .2s; 31 -webkit-transition: all .2s; 32 position: relative; 33 line-height: 40px; 34 min-width: 65px; 35 padding: 0 15px; 36 text-align: center; 37 cursor: pointer; 38 } 39 .sub-tab .sub-tab-title li.sub-tab-active{ 40 color: #009688; 41 } 42 .sub-tab .sub-tab-title li.sub-tab-active:after{ 43 position: absolute; 44 left: 0; 45 bottom: 0; 46 content: ''; 47 width: 100%; 48 border: none; 49 border-radius: 0; 50 border-bottom: 2px solid #5FB878; 51 } 52 .sub-tab .sub-tab-content div{ 53 display: none; 54 } 55 .sub-tab .sub-tab-content div.sub-tab-show{ 56 display: block; 57 } 58 .layer{ 59 width:200px; 60 height: 50px; 61 background-color: #ccc; 62 text-align: center; 63 line-height: 50px; 64 position: absolute; 65 top: 20px; 66 left:280px; 67 } 68 .layer .title{ 69 color: red; 70 } 71 </style> 72 <body> 73 <div class="sub-tab"> 74 <ul class="sub-tab-title"> 75 <li class="sub-tab-active">用户管理</li> 76 <li>权限分配</li> 77 <li>商品管理</li> 78 </ul> 79 <div class="sub-tab-content"> 80 <div class="sub-tab-item sub-tab-show">用户管理</div> 81 <div class="sub-tab-item">权限分配</div> 82 <div class="sub-tab-item">商品管理</div> 83 </div> 84 </div> 85 </body> 86 <script> 87 window.onload=function(){ 88 var subTab=new SubTab(); 89 subTab.subTabOn(); 90 } 91 function SubTab(){ 92 var _this=this; 93 this.subTab=document.querySelector('.sub-tab'); 94 this.subTabTitle=document.querySelector('.sub-tab .sub-tab-title'); 95 this.subLi=document.querySelectorAll('.sub-tab .sub-tab-title li'); 96 this.subTabContent=document.querySelector('.sub-tab .sub-tab-content'); 97 this.subTabItem=document.querySelectorAll('.sub-tab .sub-tab-item'); 98 for(var i=0;i<this.subLi.length;i++){ 99 this.subLi[i].index=i; 100 this.subLi[i].onclick=function(){ 101 _this.fnClick(this); 102 }; 103 } 104 } 105 SubTab.prototype.fnClick=function(oBth){ 106 if(this.layer){ 107 document.body.removeChild(this.layer); 108 } 109 for(var i=0;i<this.subLi.length;i++){ 110 this.subLi[i].className=""; 111 removeClass(this.subTabItem[i],'sub-tab-show'); 112 } 113 oBth.className="sub-tab-active"; 114 addClass(this.subTabItem[oBth.index],'sub-tab-show'); 115 this.msg=oBth.innerHTML; 116 this.tabIndex=oBth.index; 117 this.create(); 118 this.subTabOn(); 119 120 } 121 SubTab.prototype.create=function(){ 122 this.layer = document.createElement('div'); 123 this.layer.className = 'layer'; 124 this.layer.innerHTML = '<div class="title">切换到了'+this.tabIndex+': '+ this.msg +'</div>'; 125 document.body.appendChild( this.layer ); 126 console.log(this.layer); 127 }; 128 SubTab.prototype.subTabOn=function(){ 129 console.log(this.tabIndex); 130 console.log(this.msg); 131 } 132 133 function addClass(element, className) { 134 if(!new RegExp("(^|\s)" + className + "(\s|$)").test(element.className)) element.className += ' ' + className; 135 } 136 function removeClass(element, className) { 137 element.className = element.className.replace(new RegExp("(^|\s)" + className + "(?=(\s|$))", "g"), ''); 138 } 139 140 141 </script> 142 </html>
功能还没完善,学习中,有问题的小伙伴可以留言给我,一起交流,共同进步.