喜欢琢磨,给大家分享小编自己封装的仿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选项卡的更多相关文章

  1. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...

  2. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  3. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  4. JS原生实现视频弹幕Demo（仿）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. tab选项卡切换(js原生、jQuery )

    思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...

  6. JavaScript基础笔记（四） JS式面向对象

    JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...

  7. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  8. 面向对象的tab选项卡实现

    利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:

  9. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. prime docker-compose 环境运行试用

    prime 是一款基于graphql的开源cms,功能点很不错,但是出来不久,还是有好多bug的 官方暂时没有提供docker 的运行方式,为了方便测试,搞了以及docker-compose 测试的 ...

  2. Cocos2d-x3.0 TestCPP文件夹笔记

    1.不多说,重力加速度. 2.ActionMangerTest:此Test是为了展示通过导演类来获得动作管理器ActionManager类.来控制节点动作. ①CrashTest:销毁demo,在精灵 ...

  3. 数学的语言 化无形为可见 (Keith Devlin 著)

    第一章 数字为何靠的住 (已看) 第二章 心智的模式 (已看) 第三章 动静有数 (已看) 第四章 当数学成型 (已看) 第五章 数学揭开美之本质 (已看) 第六章 当数学到位 (已看) 第七章 数学 ...

  4. LoadRunner手写脚本、检查点、集合点、事务、思考时间

    手写脚本 什么时候要手写? 可以有条件手写脚本的场景有两类: 有接口说明文档 没有借口说明文档,要去录制,录制不了,抓包手写 所需函数 我们这里讲的例子是基于 http 协议的,也是常见的两种请求类型 ...

  5. java编程调试技巧

    1 多线程调试 开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程 ...

  6. 通过阅读python subprocess源码尝试实现非阻塞读取stdout以及非阻塞wait

    http://blog.chinaunix.net/uid-23504396-id-4661783.html 执行subprocess的时候,执行不是问题最麻烦的是获取进程执行后的回显来确认是否正确执 ...

  7. Eureka Client的使用

    1. 新建工程 下一步,名字叫client 选择Cloud Discovery->Eureka Discovery 下一步后,点击完成 2. 在ClientApplication文件中增加Ena ...

  8. grep 正则问题 this version of PCRE is compiled without UTF support

    问题 在使用grep -P,出现如下报错: grep: this version of PCRE is compiled without UTF support 原因 有些系统支持的正则规范不同. 解 ...

  9. php解析url并得到url中的参数及获取url参数

    <?php $url = 'http://www.baidu.com/index.php?m=content&c=index&a=lists&catid=6&ar ...

  10. BT.656 NTSC制式彩条生成模块(verilog)

    BT.656 NTSC制式彩条生成模块(verilog) 1.知识储备 隔行扫描是将一副图像分成两场扫描,第一场扫描第1,2,5,7...等奇数行,第二场扫描2,4,6,8...等偶数行,并把扫奇数行 ...