1500字范文 > 原生js实现tab栏切换效果

原生js实现tab栏切换效果

时间：2024-01-07 14:58:12

相关推荐

原生js实现tab栏切换效果

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识

运行效果

首先我们来看一下原生js实现的效果

下面就开始直接上代码了

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><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>

util.js

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

tpl.js

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);

index.js

// 立即执行函数 // IIFE Immediately Invoked Function Expression// 立即地调用（函数表达式）// 函数声明 !== 函数表达式// function test1 () {// console.log('Function Declaration');// }// // 把一个（匿名）函数（函数声明式）赋值给一个变量的形式函数表达式// var test2 = function () {// console.log('Function Expression');// }// // () 对于函数名后面的括号，叫做执行符号// test1();// test2();// 语法错误，执行符号只能跟在函数表达式后面// function test () {// console.log('Function Declaration');// }();// 立即地调用（函数表达式）// 当一个函数需要立即执行的情况，该函数比较形成表达式形式// 1//(1)//+1//!1// ~1// W3C推荐的立即执行函数的编写规范// (function () {// console.log('Function Expression');// }());// 实践中// ;(function () {// console.log('Function Expression');// })()// ;(function () {// console.log('Function Expression');// })()(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);

我是歌谣放弃很容易但是坚持一定很酷

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。