喜欢琢磨,给大家分享小编自己封装的仿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. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...

  2. vue-router 与 react-router 设计理念上的区别

    vue-router 与 react-router 设计理念上的区别: 区别 vue-router react-router 改成history mode: 'history' 直接使用 react- ...

  3. css加载字体跨域问题

    刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...

  4. Oracle存储过程和自定义函数笔记

    学习地址:https://www.imooc.com/learn/370 存储过程和存储函数定义:指存储在数据库中供所有用户程序调用的子程序叫做存储过程 .存储函数. 相同点:完成特定功能的程序.区别 ...

  5. IText简介及示例

    一.iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文 ...

  6. 解决openwrt中文界面异常

    openwrt的luci以中文字体显示时,出现以下异常情况: 是因为该固件编译了其他的luci application,我是编译了meshwizard. 可作如下修改: scp登陆打开/usr/lib ...

  7. maven添加自定义jar

    mvn install:install-file -Dfile=自定义jar文件路径 -DgroupId=所属组 -DartifactId=项目名 -Dversion=版本 -Dpackaging=j ...

  8. 【java】浅谈swtich

    在java中switch后的表达式的类型只能为以下几种:byte.short.char.int(在Java1.6中是这样),java1.7后支持了对string的判断 switch 的括号一定是表达式 ...

  9. linux 服务器之间配置免密登录

    客户机:172.16.1.2 远程机:172.16.1.3 1.远程机 a.允许root用户通过22端口登录 vi /etc/ssh/sshd_config PORT 22 PermitRootLog ...

  10. Gradle Java Web应用程序并在Tomcat上运行

    1- 创建Gradle工程 打开 Eclipse ,在菜单中找到 File -> New -> Other…,在打开界面中选择 Gradle Project,如下图中所示 - 点击下一步( ...