您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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切换的插件封装”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。