JavaScript plugin encapsulation for table switching

This article shares the encapsulation code of JavaScript to implement the table switching plug-in for your reference. The specific content is as follows

Effect picture:

HTML part:

<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 part:

#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 constructor part:

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()
 
        // Use class to implement 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()

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implementation of style switching function tableCSS example
How to use javascript to implement table color separation and selection highlighting (and dynamically switch data)
JavaScript uses the arrow keys to control the cursor to switch between table cells
Four ways to implement tab switching in javascript
A streamlined JS DIV layer tab switching code
Native js to achieve tab switching
JS+CSS to achieve sliding switching tab menu effect
js implements click to switch TAB tag instance
A complete example of tab page switching effect implemented by JS
Vue.js component tab implements tab switching

<<: Simple Implementation of HTML to Create Personal Resume

>>: Detailed explanation of Navicat's slow remote connection to MySQL