原生js实现tab栏切换效果
生活随笔
收集整理的這篇文章主要介紹了
原生js实现tab栏切换效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我是歌謠 放棄很容易 但是堅(jiān)持一定很酷 微信公眾號(hào)關(guān)注小歌謠一起學(xué)習(xí)前后端知識(shí)
運(yùn)行效果
首先我們來(lái)看一下原生js實(shí)現(xiàn)的效果
下面就開(kāi)始直接上代碼了
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": "選項(xiàng)1","page": "頁(yè)面1"},{"tab": "選項(xiàng)2","page": "頁(yè)面2"},{"tab": "選項(xiàng)3","page": "頁(yè)面3"}]'><!-- <div>...tab按鈕</div><div>...頁(yè)面</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>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
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} })();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
// 立即執(zhí)行函數(shù) // IIFE Immediately Invoked Function Expression // 立即地 調(diào)用 （函數(shù) 表達(dá)式）// 函數(shù)聲明 !== 函數(shù)表達(dá)式 // function test1 () { // console.log('Function Declaration'); // }// // 把一個(gè)（匿名）函數(shù)（函數(shù)聲明式）賦值給一個(gè)變量的形式 函數(shù)表達(dá)式 // var test2 = function () { // console.log('Function Expression'); // }// // () 對(duì)于函數(shù)名后面的括號(hào)，叫做執(zhí)行符號(hào) // test1(); // test2();// 語(yǔ)法錯(cuò)誤，執(zhí)行符號(hào)只能跟在函數(shù)表達(dá)式后面 // function test () { // console.log('Function Declaration'); // }();// 立即地 調(diào)用 （函數(shù) 表達(dá)式） // 當(dāng)一個(gè)函數(shù)需要立即執(zhí)行的情況，該函數(shù)比較形成表達(dá)式形式// 1 //(1)//+1 //!1// ~1// W3C推薦的立即執(zhí)行函數(shù)的編寫(xiě)規(guī)范 // (function () { // console.log('Function Expression'); // }());// 實(shí)踐中 // ;(function () { // console.log('Function Expression'); // })()// ;(function () { // console.log('Function Expression'); // })()(function test (a, b, c, d) {// 1. 可以創(chuàng)建一個(gè)與外界沒(méi)有任何關(guān)聯(lián)的作用域，獨(dú)立作用域// 2. 執(zhí)行完成以后，自動(dòng)銷(xiāo)毀// 3. ES3 ES5 立場(chǎng)上是沒(méi)有模塊概念，立即執(zhí)行函數(shù)來(lái)模擬模塊化// 封閉作用域、拋出接口// 向外部拋出一系列屬性和方法// window上保存屬性和方法console.log(test);console.log(test.length);console.log(arguments.length);console.log('Hello'); })(1,2,3);我是歌謠 放棄很容易 但是堅(jiān)持一定很酷
總結(jié)
以上是生活随笔為你收集整理的原生js实现tab栏切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： tomcat编码配置gbk_Tomcat
- 下一篇： 你提交代码前没有校验？巧用gitHook