JavaScript实现table切换的插件封装

本文实例为大家分享了javascript实现table切换插件的封装代码，供大家参考，具体内容如下

效果图：

<li class="liStyle">A</li> <li>B</li> www.easck.com <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(  www.easck.com                              function (tab) {                                    tab.classList.remove("liStyle")                                }                            )                             tb.contents.forEach(                             www.easck.com   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()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。