テーブル切り替えのための JavaScript プラグインのカプセル化

<div class="box">
        <div id="タブボックス">
            <ul>
                <li class="liStyle">あ</li>
                <li>あ</li>
                <li>こ</li>
            </ul>
            <オル>
                <li class="liStyle">あ</li>
                <li>あ</li>
                <li>こ</li>
            </ol>
        </div>
</div>

#タブボックス{
            幅: 600ピクセル;
            高さ: 450px;
            境界線: 3px 実線 #333;
        }
 
        #タブボックス>ul {
            幅: 100%;
            高さ: 50px;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
        }
 
        #tabBox>ul>li {
            フレックス: 1;
            高さ: 100%;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            色: #fff;
            背景色: スカイブルー;
            フォントサイズ: 30px;
        }
 
        #tabBox>ul.liStyle{
            背景色: ライム;
        }
 
 
        オル {
            フレックス: 1;
            幅: 600ピクセル;
            高さ: 400px;
        }
 
        ol>li {
            幅: 100%;
            高さ: 100%;
            背景色: #ccc;
            色: #fff;
            フォントサイズ: 100px;
 
            表示: なし;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
        }
 
        ol>li.liスタイル{
            ディスプレイ: フレックス;
        }

関数fn15() {
            関数TabBox(タブボックス) {
                this.tabbox = タブボックス;
 
                this.tabs = tabbox.querySelectorAll("ul>li")
                this.contents = tabbox.querySelectorAll("ol>li")
            }
 
            TabBox.prototype.startSwitch = 関数 () {
                const tb = これ
 
                tb.tabs.forEach(
                    関数 (タブ、インデックス) {
                        tab.onclick = 関数 (e) {
                            tb.tabs.forEach(
                                関数（タブ）{
                                    tab.classList.remove("liStyle")
                                }
                            ）
 
                            tb.contents.forEach(
                                関数（con）{
                                    con.classList.remove("liStyle")
                                }
                            ）
 
                            tab.classList.add("liStyle")
 
                            tb.contents[index].classList.add("liStyle")
                        }
                    }
                ）
            }
            const tabBox = document.querySelector("#tabBox")
 
            const tb = 新しいタブボックス(タブボックス)
 
            tb.startSwitch()
        }
        // fn15()
 
        // クラスを使用して関数fn16()を実装する{
            クラスTabBox{
                コンストラクタ(タブボックス) {
                    this.tabbox = タブボックス;
                    this.tabs = tabbox.querySelectorAll("ul>li")
                    this.contents = tabbox.querySelectorAll("ol>li")
                }
                スタートスイッチ() {
                    const tb = これ
 
                    tb.tabs.forEach(
                        関数 (タブ、インデックス) {
                            tab.onclick = 関数 (e) {
                                tb.tabs.forEach(
                                    関数（タブ）{
                                        tab.classList.remove("liStyle")
                                    }
                                ）
 
                                tb.contents.forEach(
                                    関数（con）{
                                        con.classList.remove("liStyle")
                                    }
                                ）
 
                                tab.classList.add("liStyle")
 
                                tb.contents[index].classList.add("liStyle")
                            }
                        }
                    ）
                }
            }
 
 
            const tabBox = document.querySelector("#tabBox")
 
            const tb = 新しいタブボックス(タブボックス)
 
            tb.startSwitch()
        }
fn16()