面向对象tab小案例---------覆盖切换，添加，删除，修改

案例

需求分析

面向对象tab案例：
	1、切换功能：点击tab栏，可以实现切换效果
    2、添加功能：点击 + 号，可以添加tab栏和内容显示项
	3、删除功能：点击 tab栏上的 x 号 ，可以删除当前的tab栏和内容显示项
    4、修改功能：双击tab栏或者内容显示项的文字时可以修改里面的文字信息.

切换功能

/**
	1.创建一个Tab类,实例化这个类,实例化时传入一个参数:最外层元素的ID属性值
	2.Tab类中新增:切换函数,添加函数,删除函数,修改函数
	3.实现切换功能
		1.通过实例化传过来的id获取到当前div的元
		2.获取div下面的所有li 和 section 元素
		3.给每个li添加 点击事件
		4.点击事件里面的:先清楚 所有li 和 section元素的className属性,在设置当前点击的li 和section氧元素的class属性值
*/
var that;
class Tab{
   
    constructor(id){
   
        that=this;
        this.div=document.querySelector(id);
        // this.div=document.getElementById(id);  //通过ID获取div元素
        this.lis=this.div.querySelectorAll("li"); //获取页面中所有li元素
        this.sections=this.div.querySelectorAll("section");  //获取页面中所有的section元素
        this.init();
    }
    /**
     * 初始化函数- 给li添加点击事件
     *  在给li添加点击事件之前，给每个li添加index属性。并且index属性值为：当前li索引
     *  */
    init(){
   
        for(var i=0;i<this.lis.length;i++){
   
            this.lis[i].index=i; //给每个li加上index属性，属性指为当前索引号（i）
            this.lis[i].onclick=this.toggleTab;
        }
    }
    //切换功能-函数（方法）
    toggleTab(){
   
        // console.log(this); //输出this指向谁
        //清除li的class属性
        that.clearClass(); //使用this会报错了。需用用其他变量保存当前类的this
        //点击哪个li就给那个li添加 class=liactive
        /**
         * this 指的是当前点击元素
         * 点击当前li是，给当前li添加class属性，并且要清楚其他li的classs属性，
         * 我们使用排它思想：先清除所有，再设置自己
         * */
        this.className="liactive";
        console.log(this.index);
        //同时还要设置section元素的class属性，设置之前，先清除所有section元素的class属性
        that.sections[this.index].className='conactive';

    }
    //清楚所有li的class属性、section元素的class属性
    clearClass(){
   
        for(var i=0;i<this.lis.length;i++){
   
            this.lis[i].className='';  
            this.sections[i].className='';
        }
    }
    //添加功能-函数（方法）
    addTab(){
   }
    //删除功能-函数（方法）
    deleteTab(){
   }
    //修改功能-函数（方法）
    updateTab(){
   }
    
}
new Tab("#tab");

添加功能

/**
添加元素语法:
	element.insertAdjacentHTML(position, text);
        position是相对于元素的位置，并且必须是以下字符串之一：
            beforebegin: 元素自身的前面。
            afterbegin: 插入元素内部的第一个子节点之前。
            beforeend: 插入元素内部的最后一个子节点之后。
            afterend: 元素自身的后面。
            text是要被解析为HTML或XML,并插入到DOM树中的字符串。
    
添加功能实现思路:
	1.创建好我们需要添加的元素:li 和 section 元素
	2.使用insertAdjacentHTML函数把我们创建好的li 和 section 元素条件进去
	3.在添加之前,我们先清楚所有li 和section元素的className属性
	4.最后添加当前li 和 section 元素是被选中.(被显示)
	注意:
		因为我们是做的新增的功能,那我们新增完之后,必须要重新获取页面中所有的li 和section的元素,因为我们要给所有的li添加上切换事件.
		具体做法:新增函数,此函数的功能就是重新获取页面中所有的li 和section的元素,然后此方法在init方法的第一行代码执行调用.
	主要分三步:
		添加前:清除所有li 和 section 元素的class属性---(调用:cleraClassI())
		添加中:把创建的li 和section 元素添加到页面中----(添加功能)
		添加后:重新获取所有的li 和section 元素,给每个li绑定切换事件 ---(调用:init())
*/
var that;
var addCount=4; //设置添加元素的个数限制
class Tab{
   
    constructor(id){
   
        that=this;
        this.div=document.querySelector(id);
        // this.div=document.getElementById(id);  //通过ID获取div元素
        this.lis=this.div.querySelectorAll("li"); //获取页面中所有li元素
        this.sections=this.div.querySelectorAll("section");  //获取页面中所有的section元素

         //获取添加按钮
         this.tabadd=this.div.querySelector(".tabadd");
         this.init();

        //获取ul 和 div 元素
        this.ul=this.div.querySelector(".tabul");
        this