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 ...
随机推荐
- hasura graphql-engine集成pgbouncer 连接池工具
pgbouncer 是一个轻量的pg 连接池工具,我们可以和hasura graphql-engine集成起来,进行连接的一些优化 环境准备 docker-compose 文件 version: '3 ...
- BeEF介绍
什么是BeFF? BeEF是眼下欧美最流行的web框架攻击平台,它的全称是 the Browser exploitation framework project.近期两年国外各种黑客的 ...
- 深入详解美团点评CAT跨语言服务监控（六）消息分析器与报表(一)
大众点评CAT微服务监控架构对于消息的具体处理,是由消息分析器完成的,消息分析器会轮训读取PeriodTask中队列的消息来处理,一共有12类消息分析器,处理后的结果就是生成各类报表. 消息分析器的构 ...
- Object.create() 的含义：从一个实例对象，生成另一个实例对象
出处:https://wangdoc.com/javascript/oop/object.html#objectcreate 生成实例对象的常用方法是,使用new命令让构造函数返回一个实例.但是很多时 ...
- elasticsearch UNASSIGNED 处理
PUT /_settings HTTP/1.1 Host: 192.168.1.12:9200 Cache-Control: no-cache Postman-Token: 1befb0fb-6492 ...
- 排序算法<No.5>【堆排序】
算法,是系统软件开发,甚至是搞软件的技术人士的核心竞争力,这一点,我坚信不疑.践行算法实践,已经有一段时间没有practise了,今天来一个相对麻烦点的,堆排序. 1. 什么是堆(Heap) 这里说的 ...
- nginx http 正向代理
打开\nginx-1.12.2\conf\nginx.conf, 在http{ } ,大括号内加入 http { #............................. #...... ...
- Python开发工具Atom
python基础教程之Python开发工具Atom 本节内容如下: Atom简介 下载安装Atom 安装Python开发包 使用Atom开发Python程序 Atom简介 Atom是Github开 ...
- [蓝桥杯]ALGO-90.算法训练_出现次数最多的整数
问题描述 编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会超过20.然后程序将对这个数组进行统计,把出现次数最多的那个数组元素值打印出来.如果有两 ...
- vagrant在windows下的安装和配置
记录一下安装和配置过程中的一些坑步骤一分别下载vagrant和VirtualBox,我这里下载的是vagrant_1.9.1.msi 和 VirtualBox-5.1.14-112924-Win.ex ...