本文实例为大家分享了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()以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
