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 ...
随机推荐
- 数学 它的内容,方法和意义 第三卷 (A. D. 亚历山大洛夫 著)
第十五章 实变数函数论 1. 绪论 2. 集合论 3. 实数 4. 点集 5. 集合的测度 6. 勒贝格积分 第十六章 线性代数 1. 线性代数的对象和它的工具 2. 线性空间 3. 线性方程组 4. ...
- secureCRT 设置证书免密登陆
1 第一步 2 第二步 3 第三步 4 第4 步 ,然后选择你的 私钥文件
- 查看Linux系统版本信息（转）
一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc/version Linux version 2.6 ...
- Zookeeper命令行world
world:anyone:cdrwa getAcl /imooc/abc 获得节点abc的权限 设置权限为crwa. setAcl /nick/abc world:anyone:crwa 测试删除权 ...
- Go hashcode 输入一个字符串，得到一个唯一标识码
如何输入一个字符串,得到一个唯一的hashcode? 例子如下: package main import ( "fmt" "hash/crc32" ) // S ...
- 如何编译运行HanLP自然语言处理包
master分支 对于master分支,编译方法如下: git clone https://github.com/hankcs/HanLP.git mvn install -DskipTests · ...
- PostgreSQL的下载安装
下载地址:http://www.postgres.cn/download 下载地址:http://www.filehorse.com/download-postgresql-64/ 下载地址2:htt ...
- Spring Http Invoker使用简介
一.Spring HTTP Invoker简介 Spring HTTP invoker 是 spring 框架中的一个远程调用模型,执行基于 HTTP 的远程调用(意味着可以通过防火墙),并使用 ja ...
- LINUX下PHP网页生成快照（截屏）（xvfb and wkhtmltoimage）
经测试,可以使用 利用php截屏或实现网页快照我们需要用一个工具:xvfb and wkhtmltoimagek哦,这个工具目前只能在linux系统中使用,下面有兴趣的朋友可进入参考. 在做旅游攻略时 ...
- 一文说尽 MySQL 优化原理
说起MySQL的查询优化,相信大家收藏了一堆奇技淫巧:不能使用SELECT *.不使用NULL字段.合理创建索引.为字段选择合适的数据类型..... 你是否真的理解这些优化技巧?是否理解其背后的工作原 ...