js table切换插件封装 JavaScript实现table切换的插件封装
ZlikeN 人气:0想了解JavaScript实现table切换的插件封装的相关内容吗,ZlikeN在本文为您仔细讲解js table切换插件封装的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,table切换插件封装,js,table切换插件,js切换插件封装,下面大家一起来学习吧。
效果图:
HTML部分:
<div class="box"> <div id="tabBox"> <ul> <li class="liStyle">A</li> <li>B</li> <li>C</li> </ul> <ol> <li class="liStyle">A</li> <li>B</li> <li>C</li> </ol> </div> </div>
css部分:
#tabBox { width: 600px; height: 450px; border: 3px solid #333; } #tabBox>ul { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; } #tabBox>ul>li { flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; background-color: skyblue; font-size: 30px; } #tabBox>ul .liStyle { background-color: lime; } ol { flex: 1; width: 600px; height: 400px; } ol>li { width: 100%; height: 100%; background-color: #ccc; color: #fff; font-size: 100px; display: none; justify-content: center; align-items: center; } ol>li.liStyle { display: flex; }
JavaScript构造函数部分:
function fn15() { function TabBox(tabbox) { this.tabbox = tabbox; this.tabs = tabbox.querySelectorAll("ul>li") this.contents = tabbox.querySelectorAll("ol>li") } TabBox.prototype.startSwitch = function () { const tb = this tb.tabs.forEach( function (tab, index) { tab.onclick = function (e) { tb.tabs.forEach( function (tab) { tab.classList.remove("liStyle") } ) tb.contents.forEach( function (con) { con.classList.remove("liStyle") } ) tab.classList.add("liStyle") tb.contents[index].classList.add("liStyle") } } ) } const tabBox = document.querySelector("#tabBox") const tb = new TabBox(tabBox) tb.startSwitch() } // fn15() // 使用class实现 function fn16() { class TabBox { constructor(tabbox) { this.tabbox = tabbox; this.tabs = tabbox.querySelectorAll("ul>li") this.contents = tabbox.querySelectorAll("ol>li") } startSwitch() { const tb = this tb.tabs.forEach( function (tab, index) { tab.onclick = function (e) { tb.tabs.forEach( function (tab) { tab.classList.remove("liStyle") } ) tb.contents.forEach( function (con) { con.classList.remove("liStyle") } ) tab.classList.add("liStyle") tb.contents[index].classList.add("liStyle") } } ) } } const tabBox = document.querySelector("#tabBox") const tb = new TabBox(tabBox) tb.startSwitch() } fn16()
加载全部内容