| 本文实例为大家分享了JavaScript实现table切换插件的封装代码，供大家参考，具体内容如下 效果图： 
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()以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
ReactHooks批量更新state及获取路由参数示例解析
js原生瀑布流插件制作 |
