JavaScript实现table切换的插件封装 JavaScript实现table切换的插件封

本文实例为大家分享了JavaScript实现table切换插件的封装代码，供大家参考，具体内容如下
效果图：

文章图片

HTML部分：

A
B
C
A
B
C

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

【JavaScript实现table切换的插件封装】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。