导航：首页 > 开发技术 >

JavaScript如何实现table切换的插件封装

发表于：2026-10-31 作者：千家信息网编辑

千家信息网最后更新 2026年10月31日，这篇文章主要介绍JavaScript如何实现table切换的插件封装，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图：HTML部分：

千家信息网最后更新 2026年10月31日JavaScript如何实现table切换的插件封装

这篇文章主要介绍JavaScript如何实现table切换的插件封装，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

效果图：

HTML部分：

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切换的插件封装"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！

很赞哦！