JavaScript实现table切换的插件封装
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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()以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
