Js面向对象动态添加标签页，Tab栏切换

注意：

// 双击禁止选定文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                   
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>
    <script src="js/index.js"></script>

</body>

</html>

var that;
class Tab {
    constructor(id) {
            // 获取对象
            that = this;
            this.main = document.querySelector(id);
            // li的父元素
            this.ul = this.main.querySelector(".fisrstnav ul:first-child");
            // section 父元素
            this.fsection = this.main.querySelector(".tabscon")
            this.tabadd = this.main.querySelector(".tabadd")
            this.init()
        }
        // init 初始化操作让相关的元素绑定事件
    init() {
            // 初始化的时候需要获取更新后的数据
            this.updataEle()
            this.tabadd.onclick = this.addTab;
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i;
                this.lis[i].onclick = this.toggleTab;

                this.closecons[i].onclick = this.removeTab;
                this.spans[i].ondblclick = this.editTab;
                this.sections[i].ondblclick = this.editTab;
            }
        }
        // 因为我们动态添加元素 需要从新获取对应的元素
    updataEle() {
            this.lis = this.ul.querySelectorAll("li");
            this.sections = this.fsection.querySelectorAll("section")
            this.closecons = this.main.querySelectorAll(".icon-guanbi");
            this.spans = this.main.querySelectorAll(".fisrstnav li span:first-child")
        }
        // 切换功能
    toggleTab() {
            that.clearCurrent();
            this.className = "liactive";
            var index = this.index;
            that.sections[index].className = "conactive";
        }
        // 清除样式表,调用了2次,单独写出来提高效率
    clearCurrent() {
            for (var i = 0; i < that.lis.length; i++) {
                this.lis[i].className = "";
                this.sections[i].className = "";
            }
        }
        // 添加列表
    addTab() {
        that.clearCurrent()
        var i = Math.random();
        // 主要添加新li，默认是选中状态
        var li = '<li  class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
        var section = "<section  class='conactive'>" + i + "</section>"
            // 这个是添加内容新语法，很好用哦
        that.ul.insertAdjacentHTML("beforeEnd", li);
        that.fsection.insertAdjacentHTML("beforeEnd", section);
        // 添加完之后还需要初始化一下，方便给新增加的元素加方法 
        that.init();
    }
    removeTab(e) {
        // 防止点删除间的时候产生父元素切换，冒泡现象
        e.stopPropagation();
        var index = this.parentNode.index;
        // 删除2项
        this.parentNode.remove();
        that.sections[index].remove();
        that.init();
        // 删除完后需要默认选中
        if (document.querySelector(".liactive")) { return }
        index--;
        // 利用逻辑与的关系
        that.lis[index] && that.lis[index].click();
    }
    editTab() {
        var text = this.innerHTML;
        // 双击禁止选中
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text">'
        var input = this.children[0];
        input.value = text;
        input.select();
        input.onblur = function() {
            var text = this.value;
            this.parentNode.innerHTML = text;
        }
        input.onkeyup = function(e) {
            if (e.keyCode === 13) {
                this.onblur()
            }
        }
    }
}
tab = new Tab("#tab")