TAB栏切换javascript面向对象

以下是用javascript写的tab栏

功能：增 删 改

js源码

--js

let that;
class Tab{
    constructor(id){
        that = this;
        this.tab = document.querySelector(id);
        this.mList = this.tab.querySelector(".m-list");
        this.lis = this.tab.querySelectorAll(".m-list li");
        this.sections = this.tab.querySelectorAll(".content section");
        this.content = this.tab.querySelector(".content");
        this.add = this.tab.querySelector(".add a");
        this.init();

    }

    updateNode(){
        this.lis = this.tab.querySelectorAll(".m-list li");
        this.sections = this.tab.querySelectorAll(".content section");
        this.remove = this.tab.querySelectorAll(".m-list li span:last-child");
        this.oSpan = this.tab.querySelectorAll(".m-list li span:first-child");

    }
    init(){
            this.updateNode();
            for(let i=0;i<this.lis.length;i++){
                this.lis[i].index = i
                this.lis[i].onclick = this.toggleTab;
                this.remove[i].onclick=this.removeTab;
                this.oSpan[i].ondblclick = this.editTab;
                this.sections[i].ondblclick = this.editTab;
            }
            this.add.onclick = this.addTab;
        }
    clearClass(){
        for(let i=0;i<this.lis.length;i++){
            this.lis[i].index = i;
            this.lis[i].className = "";
            this.sections[i].className = "";
        }
    }

    toggleTab(){
        that.clearClass();
        this.className = "liactive";
        that.sections[this.index].className = "show-section";
    }
    addTab(){
        that.clearClass();
        let new_li = "<li class='liactive'><span>New Option</span><span>x</span></li>";
        let new_section = "<section class='show-section'>"+ Math.random() +"</section>";
        that.mList.insertAdjacentHTML("beforeend",new_li);
        that.content.insertAdjacentHTML("beforeend",new_section);
        that.init();

    }
    removeTab(e){
        e.stopPropagation();
        let index = this.parentNode.index;
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        if(document.querySelector(".liactive"))return;
        index--;
        // if(index<0)return;
        that.lis[index] && that.lis[index].click();
        
    }
    editTab(){
        let str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = "<input type='text'/>";
        let input = this.children[0];
        input.value = str;
        input.select();
        input.onblur = function(e){
            this.parentNode.innerHTML = this.value;
        }
        input.onkeyup = function(e){
            if(e.keyCode==13){
                this.blur();

            }
        }

    }


}

new Tab("#tab");

--CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body{
    height: 100vh;
    background: #ddd;
}

#tab{
    margin: 50px auto;
    width: 700px;
    height: auto;
    display: flex;
    flex-direction: column;
}

#tab .menu{
    height: 60px;
    display: flex;
    position: relative;
}
#tab .menu .m-list {
    display: flex;
    height: 100%;
}
#tab .menu .m-list li{
    width: 100px;
    height: 100%;
    border: solid 1px #555;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.m-list li span:nth-child(2){
    position: absolute;
    top:0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: #000;
    border-bottom-left-radius: 20px;
    color: #fff;
    font-size: 12px;
    padding-left: 10px;
    cursor: pointer;
}
#tab .menu .m-list li:last-child{
    border-right: none;
}

.menu .add{
    border: solid 1px rgba(0,0,0,.3);
    width: 100%;
    height: 100%;

}
.add a{
    position: absolute;
    right: 10px;
    top: 15px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
    border: solid 1px #555;
}

#tab .content{
    width: 100%;
    position: relative;
}

#tab .content section{
    width: 100%;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    border: solid 1px #333;
    border-top: none;
    display: none;
}
#tab .content section input{
    width: 450px;
    height: 300px;

}
#tab .content .show-section{
    display: flex;
    justify-content: center;
    padding-top: 50px;
    background: #fff;
    background: #fff;
    color: red;
}

#tab .menu .m-list .liactive{
    border-bottom:none; 
    background: #fff;
    color: red;
}

input{
    width: 80px;
    height: 40px;
    font-size: 16px;
    color: red;
}

--HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Javascript OPP</title>

</head>
<body>
    <section id="tab">
        <div class="menu">
            <ul class="m-list">
                <li class="liactive">
                    <span>option1</span>
                    <span>x</span>
                </li>
                <li>
                    <span>option2</span>
                    <span>x</span>
                </li>
                <li>
                    <span>option3</span>
                    <span>x</span>
                </li>
            </ul>
            <div class="add">
                <a href="javascript:;">+</a>
            </div>
        </div>
        <div class="content">
            <section class="show-section">1213</section>
            <section>456</section>
            <section>789</section>
        </div>
    </section>    
    <script src="./class.js"></script>
</body>
</html>