导航

js原生面向对象-仿layui选项卡

Posted on 2018-01-24 23:58  小飞博客  阅读(277)  评论(0)  编辑  收藏  举报

喜欢琢磨,给大家分享小编自己封装的仿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>

功能还没完善,学习中,有问题的小伙伴可以留言给我,一起交流,共同进步.