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()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现头像图片切割缩放及无刷新上传图片的方法,涉及javascript结合php实现文件无刷新上传等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Javascript中的方法和匿名方法,以实例形式较为详细的分析了javascript中方法及匿名方法的定义与使用技巧,需要的朋友可以参考下2015-06-06
JavaScript动画原理之如何使用js进行动画效果的实现
在现在做页面很多时候都会用上动画效果,比如下拉菜单,侧边搜索栏,层的弹出与关闭等等,下面这篇文章主要给大家介绍了关于JavaScript动画原理之如何使用js进行动画效果实现的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JavaScript事件监听器详细介绍,文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-09-09
Opacity.js...2007-01-01
这篇文章主要介绍了ES6新特性之数组、Math和扩展操作符用法,结合实例形式分析了ES6中数组、Math和扩展操作符的新特性、使用方法及相关注意事项,需要的朋友可以参考下2017-04-04
void是javascript中的一个操作符，void会计算表达式的值，但是会丢弃表达式的返回值接下来将详细介绍下，感兴趣的你可以参考下或许对你有所帮助2013-03-03
js实现table添加行tr、删除行tr、清空行tr的简单实例
下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要给大家介绍了关于js实现日期天数、时分秒的倒计时的相关资料,实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒,需要的朋友可以参考下2023-11-11
最常用的12种设计模式小结，学习js的朋友可以参考下。2011-08-08
最新评论