原生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}
})();
原生js实现一个tab栏的标签操作相关推荐
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
- 原生js完成一个简单的抽奖功能
文章目录 前言 实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖 完整代码 HTML部分 CSS部分 ...
- 原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏 利用javascript制作一个简单的打字小游戏 之前写了一个贪吃蛇小游戏好像反响不错 今天我来写一个比贪吃蛇更low更简单的打字小游戏 打字小游戏原理 接下来咋们直 ...
- 原生JS项目练习——tab选项卡功能
一.主要功能介绍: 1.写UI结构 2.获取元素 3.for循环遍历数组,给每一个li添加一个index属性并赋值.(原因等会会总结) 4.绑定鼠标的mousemove事件,鼠标移到某个模块,将该模块 ...
- 手把手教你用js封装一个导航栏组件
文章目录 前言 一.实现思路介绍 二.代码 1.html代码 2.js代码 3.css代码 总结 前言 本文介绍如何用js封装一个组件,这里以导航栏为例. 看这篇文章你需要有一定的js基础哦 一.实现 ...
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 前端每日实战:163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏(内含 3 个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LXMzRX 可交互视频 此视频是可 ...
- js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
最新文章
- ubuntu14.04交叉编译vlc2.1.5源码,编译出在win32下运行的程序
- 一套实用的数据中心设计方案
- oracle 按某个字段分类汇总,[数据库]Oracle语句分类汇总
- Mac OS使用技巧十八:Safari碉堡功能之一制作Widget
- Vue全家桶 之 Vue基础
- System.getProperty(user.dir)
- udacity 的如何使用git课程终于找出merge master和coins时候的问题了
- 每天进步一点点013
- 税务Ukey如何进行批量开票
- 2018年小学计算机面试,2018上半年小学信息技术教师资格证面试试题(精选)第一批...
- linux apktool的用法,Apktool的基本用法
- eclipse的安装及最大子数组求和
- 理解opencv读取图片后的格式,理解图片矩阵的储存方式
- 初级程序员最应避免的 7 大错误
- 全基因组多位点序列分型
- 财经类大学计算机专业就业,财经类高校学生就业前景如何?工资高吗?
- antV G2plot清除图注removeAnnotation
- 多线程爪巴虫下载进击的巨人 v.2
- CleanMyMac X4.8许可证Crack Keygen
- 免费申请HTTPS证书六大方法
热门文章
- 重学TCP协议(4) 三次握手
- Java—jsp编程
- Mysql中行转列和列转行
- ASP.NET Core 源码学习之 Logging[3]:Logger
- 如何限制对象只能建立在堆上或者栈上
- 两条路,此人如何问甲乙问题?才能走向京城
- DrawImage内存不足问题
- Oracle 大规模 delete,update 操作 注意事项
- java虚拟机编译文件,理解Java虚拟机(1)之一个.java文件编译成.class文件发生了什么...
- C语言Node lt T gt,c语言论坛填空;#includelt;stdio.hgt;# 爱问知识人