JavaScript实现table切换的插件封装
更新时间：2021年10月04日 08:54:16 作者：ZlikeN
这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了webpack的懒加载和预加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了微信小程序实现横向增长表格的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
每天都有大量网友申请加入我的团队，于是审核团队新成员成了一个费力气的活儿，在此情况下，我写了个脚本，自动计算他们的回答采纳率，采纳率低于20%的自动打勾 选中，等级太低的人也自动打勾选中2014-02-02
ASP中用Join和Array，可以加快字符连接速度的代码...2007-08-08
这篇文章主要介绍了微信小程序实现获取用户信息并存入数据库操作,涉及微信小程序wx.request后台数据交互及php数据存储相关操作技巧,需要的朋友可以参考下2019-05-05
javascript 延迟加载技术(lazyload)简单实现
延迟加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.2011-01-01
void类型和never类型都是ts新增的类型，这两者的共同点是都常见用于声明函数的返回值的类型，这里我们把它们两放在一起介绍有助于大家区分，这篇文章主要介绍了ts中的void和never类型及区别,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JS实现的在线调色板,可实现响应鼠标点击动态改变调色板颜色的功能,涉及JavaScript针对页面元素属性的动态操作与计算技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了JavaScript实现商品评价五星好评，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章介绍了复制行与删除行在JS中操作的实例，需要的朋友可以参考一下2013-06-06
最新评论