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选项卡的更多相关文章
- 原生js使用面向对象的方法开发选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- JS原生实现视频弹幕Demo(仿)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- tab选项卡切换(js原生、jQuery )
思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...
- JavaScript基础笔记(四) JS式面向对象
JS式面向对象 一.理解对象 一)属性类型 ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征. ECMA-262 定义这些特性是为 ...
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
- 面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
随机推荐
- 全网最详细的Windows系统里Oracle 11g R2 Client(64bit)的下载与安装(图文详解)
不多说,直接上干货! 环境: windows10系统(64位) 最好先安装jre或jdk(此软件用来打开oracle自带的可视化操作界面,不装也没关系:可以安装plsql,或者直接用命令行操作) Or ...
- VBA: 怎样批量数据从Excel派出到Visio
上周派到了个case, 是批量从Excel导出数据导Visio每个图形中. 花了些时间实现了这个功能. 原理如下: 打开Excel 新建/打开表单 指向所选择的表单 遍历所在列的所有数据 打开Visi ...
- pdf.js 的使用
现在的浏览器基本都支持直接把 pdf 文件拖到浏览器就可以打开,不用下载pdf阅读插件,但是在写网页的时候遇到了 pdf 文件怎么办呢,有两种解决办法,一种是用 falsh 来向用户展示,优点就是支持 ...
- python 术语
python 术语 术语英文 术语中文 说明 PyPI(Python Package Index) 搜索python包的网站:https://pypi.org/ pip.easy_install 包管 ...
- requestAnimationFrame 知识点
与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...
- Linux split命令详解
Linux split命令 Linux split命令用于将一个文件分割成数个.该指令将大文件分割成较小的文件,在默认情况下将按照每1000行切割成一个小文件. 将输入内容拆分为固定大小的分片并输出到 ...
- Spark基本术语表+基本架构+基本提交运行模式
一.Spark基本术语表 转载自:http://blog.csdn.net/simple_the_best/article/details/70843756 以下内容来自 http://spark.a ...
- Maven install报MojoFailureException
[ERROR] 位置: 类 com.spark.test.JavaDirectKafkaWordCount [ERROR] /I:/TrueTimeControlOnSparkByJava/src/m ...
- newifi mini将led指示灯引出当gpio使用
之前买了个newifi mini的路由器,CPU是mt7620a的,有7个led指示灯.现在想要把控制led灯的gpio引出来,方便其他驱动或应用的开发. 一.硬件部分 1.联想路由 现在想要把USB ...
- Thinkphp路由使用
'URL_ROUTER_ON' => true, //开启路由 2.定义路由 'URL_ROUTE_RULES' => array( '/^c_(\d+)$/' => 'Index/ ...