这篇文章主要介绍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()以上是“JavaScript如何实现table切换的插件封装”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
