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

喜欢琢磨,给大家分享小编自己封装的仿layui的选项卡.
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>sub-tab组件-学习从模仿开始</title>

 </head>

 <style>

     *{

         list-style: none;

         padding: 0;

         margin: 0;

     }

     .sub-tab{

     }

     .sub-tab .sub-tab-title{

         position: relative;

         left: 0;

         height: 40px;

         white-space: nowrap;

         font-size: 0;

         border-bottom-width: 1px;

         border-bottom-style: solid;

         border-color: #e6e6e6;

     }

     .sub-tab .sub-tab-title li{

         display: inline-block;

         vertical-align: middle;

         font-size: 14px;

         transition: all .2s;

         -webkit-transition: all .2s;

         position: relative;

         line-height: 40px;

         min-width: 65px;

         padding: 0 15px;

         text-align: center;

         cursor: pointer;

     }

     .sub-tab .sub-tab-title li.sub-tab-active{

         color: #009688;

     }

     .sub-tab .sub-tab-title li.sub-tab-active:after{

         position: absolute;

         left: 0;

         bottom: 0;

         content: '';

         width: 100%;

         border: none;

         border-radius: 0;

         border-bottom: 2px solid #5FB878;

     }

     .sub-tab .sub-tab-content div{

         display: none;

     }

     .sub-tab .sub-tab-content div.sub-tab-show{

         display: block;

     }

     .layer{

         width:200px;

         height: 50px;

         background-color: #ccc;

         text-align: center;

         line-height: 50px;

         position: absolute;

         top: 20px;

         left:280px;

     }

     .layer .title{

         color: red;

     }

 </style>

 <body>

     <div class="sub-tab">

         <ul class="sub-tab-title">

             <li class="sub-tab-active">用户管理</li>

             <li>权限分配</li>

             <li>商品管理</li>

         </ul>

         <div class="sub-tab-content">

             <div class="sub-tab-item sub-tab-show">用户管理</div>

             <div class="sub-tab-item">权限分配</div>

             <div class="sub-tab-item">商品管理</div>

         </div>

     </div>

 </body>

 <script>

     window.onload=function(){

         var subTab=new SubTab();

         subTab.subTabOn();

     }

     function SubTab(){

         var _this=this;

         this.subTab=document.querySelector('.sub-tab');

         this.subTabTitle=document.querySelector('.sub-tab .sub-tab-title');

         this.subLi=document.querySelectorAll('.sub-tab .sub-tab-title li');

         this.subTabContent=document.querySelector('.sub-tab .sub-tab-content');

         this.subTabItem=document.querySelectorAll('.sub-tab .sub-tab-item');

         for(var i=0;i<this.subLi.length;i++){

             this.subLi[i].index=i;

             this.subLi[i].onclick=function(){

                 _this.fnClick(this);

             };

         }

     }

     SubTab.prototype.fnClick=function(oBth){

         if(this.layer){

             document.body.removeChild(this.layer);

         }

         for(var i=0;i<this.subLi.length;i++){

             this.subLi[i].className="";

             removeClass(this.subTabItem[i],'sub-tab-show');

         }

         oBth.className="sub-tab-active";

         addClass(this.subTabItem[oBth.index],'sub-tab-show');

         this.msg=oBth.innerHTML;

         this.tabIndex=oBth.index;

         this.create();

         this.subTabOn();

     }

     SubTab.prototype.create=function(){

         this.layer = document.createElement('div');

         this.layer.className = 'layer';

         this.layer.innerHTML = '<div class="title">切换到了'+this.tabIndex+': '+ this.msg +'</div>';

         document.body.appendChild( this.layer );

         console.log(this.layer);

     };

     SubTab.prototype.subTabOn=function(){

         console.log(this.tabIndex);

         console.log(this.msg);

     }

     function addClass(element, className) {

       if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)) element.className += ' ' + className;

     }

     function removeClass(element, className) {

       element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(?=(\\s|$))", "g"), '');

     }

 </script>

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

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

最新文章

热门文章
