原生js实现一个tab栏的标签操作

我是歌谣 闲来无事做 就不如写写代码

本次不过多对原生的操作进行说法

我们直接上代码

效果图

有一个index.html的文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#my-tab {width: 500px;height: 500px;border: 1px solid #000;margin: 50px auto;}.tab-wrapper {height: 50px;border-bottom: 1px solid #000;}.tab-item {float: left;width: 33.33%;height: 50px;text-align: center;line-height: 50px;}.tab-item.current {background-color: #000;color: #fff;}.page-wrapper {position: relative;height: 450px;}.page-item {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 450px;text-align: center;line-height: 450px;}.page-item.current {display: block;}
</style>
</head>
<body><div id="my-tab" data='[{"tab": "选项1","page": "页面1"},{"tab": "选项2","page": "页面2"},{"tab": "选项3","page": "页面3"}]'><!-- <div>...tab按钮</div><div>...页面</div> --></div><script src="js/utils.js"></script><script src="js/tpl.js"></script><script src="js/myTab.js"></script><script>new MyTab('#my-tab');
</script>
</body>
</html>

index.js这个类

(function test (a, b, c, d) {// 1. 可以创建一个与外界没有任何关联的作用域,独立作用域// 2. 执行完成以后,自动销毁// 3. ES3 ES5 立场上是没有模块概念,立即执行函数来模拟模块化// 封闭作用域、抛出接口// 向外部抛出一系列属性和方法// window上保存属性和方法console.log(test);console.log(test.length);console.log(arguments.length);console.log('Hello');
})(1,2,3);

MyTab.js

(function (doc, tpl, tools) {function MyTab (el) {this.el = doc.querySelector(el);this.data = JSON.parse(this.el.getAttribute('data'));this._index = 0;this.init();}MyTab.prototype.init = function () {this._render();this._bindEvent();}MyTab.prototype._render = function () {var tabWrapper = doc.createElement('div');var pageWrapper = doc.createElement('div');var oFrag = doc.createDocumentFragment();tabWrapper.className = 'tab-wrapper';pageWrapper.className = 'page-wrapper';this.data.forEach(function (item, index) {tabWrapper.innerHTML += tools.tplReplace(tpl.tab('tab'), {tab: item.tab,current: !index ? 'current' : ''});pageWrapper.innerHTML += tools.tplReplace(tpl.tab('page'), {page: item.page,current: !index ? 'current' : ''});});oFrag.appendChild(tabWrapper);oFrag.appendChild(pageWrapper);this.el.appendChild(oFrag);}MyTab.prototype._bindEvent = function () {var doms = {oTabItems: doc.querySelectorAll('.tab-item'),oPageItems: doc.querySelectorAll('.page-item')}this.el.addEventListener('click', this._handleTabClick.bind(this, doms), false);}MyTab.prototype._handleTabClick = function () {var _doms = arguments[0],tar = arguments[1].target,className = tar.className.trim();if (className === 'tab-item') {_doms.oTabItems[this._index].className = 'tab-item';_doms.oPageItems[this._index].className = 'page-item';this._index = [].indexOf.call(_doms.oTabItems, tar);tar.className += ' current';_doms.oPageItems[this._index].className += ' current';}}window.MyTab = MyTab;
})(document, tpl, tools);

tql.js

var tpl = (function () {function tab (field) {switch (field) {case 'tab':return (`<div class="tab-item {{ current }}">{{ tab }}</div>`);case 'page':return (`<div class="page-item {{ current }}">{{ page }}</div>`);default:break;}}return {tab: tab}
})();

util.js

var tools = (function () {function tplReplace (tpl, replaceObj) {return tpl.replace(/\{\{(.*?)\}\}/g, function (node, key) {return replaceObj[key.trim()];})}return {tplReplace: tplReplace}
})();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/408689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜索和在线阅读 Github 代码的插件推荐

2019 年第 31 篇&#xff0c;总 55 篇文章上一篇文章 推荐了 3 个 Github 相关的项目&#xff0c;这次继续推荐 3 个项目&#xff0c;严格说是 3 个插件&#xff0c;主要是帮助搜索 Github 项目和在线阅读代码的插件。1. GitHunt第一个是帮助搜索在指定时间内 Star 数量增长最多…

下载开发证书步骤(自用备忘)

下开发证书步骤 1.https://developer.apple.com/cn/ 2.https://developer.apple.com/devcenter/ios/index.action 3.Certificates, Identifiers & Profiles 4.Provisioning Profiles 转载于:https://www.cnblogs.com/joesen/p/3158284.html

磁盘阵列服务器Intel C610系列,超微6048R-E1CR36N 36盘位存储服务器 磁盘阵列

Key Features1. Dual socket R3 (LGA 2011) supportsIntel Xeon processor E5-2600v4†/ v3 family; QPI up to 9.6GT/s2. Up to 3TB† ECC 3DS LRDIMM , up toDDR4- 2400†MHz ; 24x DIMM slots3. 2 PCI-E 3.0 x16, 3 PCI-E 3.0 x8.1 PCI-E 2.0 x4 (in x8)Slot 3 &4 occup…

手动封装element-ui里面的button组件

首先我们知道vue里面包含有父子组件 但是你知道如果要进行一个element的手动组件封装 怎么封装吗 1首先第一步 首先我们建立一个组件 最好设置在一个文件目录下比如components 只是一个普通的组件 叫做OneButton.vue <template><button class"one-button&…

GIS数据里的4D数据

数字高程模型&#xff08;Digital Elevation Model&#xff0c;缩写DEM&#xff09;是在某一投影平面&#xff08;如高斯投影平面&#xff09;上规则格网点的平面坐标&#xff08;X&#xff0c;Y&#xff09;及高程&#xff08;Z&#xff09;的数据集。DEM的格网间隔应与其高程…

Python 基础入门--简介和环境配置

2019 年第 32 篇&#xff0c;总 56 篇文章本文大约 1w 字&#xff0c;建议收藏阅读上周结束了如何构造一个机器学习项目的系列文章&#xff0c;当然还有一篇简单的总结以及介绍一些入门的学习资料&#xff0c;不过还在整理&#xff0c;应该这周内会整理好的。现在是系统的整理学…

这些单词你都念对了吗?顺便推荐三份程序员专属英语教程!

2019 第 36 篇文章&#xff0c;总第 60 篇文章本文大约 3500 字&#xff0c;阅读大约需要 9 分钟作为程序员&#xff0c;除了要有好的编程能力&#xff0c;计算机基础&#xff0c;还必须具备一定的英语能力&#xff0c;至少能看懂和计算机编程相关的英语&#xff0c;可以在谷歌…

curl

转载于:https://www.cnblogs.com/MyFlora/p/3164687.html

机器学习入门学习资料推荐

今天介绍一些机器学习的学习资料&#xff0c;主要是分为以下几个方面的内容&#xff1a; 编程语言&#xff1a;实现机器学习&#xff0c;主要是介绍 Python 方面的语言&#xff1b;书籍&#xff1a;看书通常是入门的一种方法&#xff0c;比较适合自律性强的同学&#xff1b;视…

看视频时,类加载器没太理解,现在再整理下几个要点

类加载器负责把类加载到java虚拟机即JVM中&#xff0c;指定类的名称&#xff0c;类加载器就会定位这个类的定义&#xff0c;每一个java类必须由类加载器加载。 当启动JVM的时候&#xff0c;我们可以使用三个类加载器&#xff1a;引导类加载器、扩展类加载器、应用程序类加载器 …

技术是什么?

学编程的这段时间 。总会听到旁边的朋友 老师提起词&#xff0c;总不假思索的就这样过去。总认为它就是个词&#xff0c;没想过它到底是什么&#xff1f; 怎么衡量自己技术好还是坏&#xff1f;自己技术到了什么程度了&#xff1f; 突然觉得就像煮饭&#xff0c;要怎么做才能做…

漫画人工智能:人工智能简史

这是公众号推荐的第 8 篇好文来源&#xff1a;大鱼AI作者&#xff1a;Dr.Wu点击上方“大鱼AI”&#xff0c;选择“星标或置顶公众号”关键时刻&#xff0c;第一时间送达&#xff01;作者&#xff1a;武博士、宋知达、袁雪瑶、聂文韬本节我们会以生动有趣的漫画来介绍关于人工智…

字符串混淆技术应用 设计一个字符串混淆程序 可混淆.NET程序集中的字符串

关于字符串的研究&#xff0c;目前已经有两篇。 原理篇&#xff1a;字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串 实践篇&#xff1a;字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略 今天来讲第三篇&#xff0c;如何应用上面所学内容&#xff0c…

Github上的各大高校资料以及国外公开课视频

2019 第 37 篇文章&#xff0c;总第 61 篇文章本文大约 1800 字&#xff0c;阅读大约需要 5 分钟最近发现兴起了一股在 Github 上大学的潮流&#xff0c;目前可以选择的大学包括清华、北大、上海交通大学、中国科学技术大学、中山大学&#xff0c;然后今天还发现还可以选择上国…