hello，友友们，今天鱼小包同学主要实现的功能是tab栏的切换，相信有一定基础的友友一定知道面向对象这个思想，那么今天就让我们一起去探索用这个思想实现tab栏的切换吧！let's go！
tab栏切换的主要功能：
- 增删改查四大功能
- 点击某一个tab栏，此tab栏高亮并对应的内容显示
- 动态添加tab栏及内容
- 点击删除某一个tab栏，此tab栏消失并内容跟着消失，高光改变
- 双击某一tab栏，可以修改此tab栏的标题和内容
以上就是想要实现的功能啦，有些友友看了之后是不是有些熟悉呢，哈哈，不要开心的太早，一些些小小的bug隐藏在其中，冲鸭！
首先展示一下html代码，一些基本的结构：
?
?部分css样式在这里就不加以展示啦，相信友友们都会写呢，初学者想要学习的话欢迎私聊鱼小包同学哦~
以下将是本文的重点，友友们要认真看哦。想要用面向对象的思想实现这项功能，首先我们需要新建一个类，把公共的属性和方法抽取出来写进去，然后根据我们的类去实例化对象，再对应去创建一个个对象就可以了。
抽取对象：Tab对象
该对象功能：
- 该对象具有切换功能
- 该对象具有添加功能
- 该对象具有删除功能
- 该对象具有修改功能
现在我们既抽取出了一个大对象Tab，又分析了它的具体功能，那接下来我们一起去给这个对象创建一个类并把这些功能写进去吧：
class Tab {
constructor(id) { }
//1.切换功能
toggleTab() { }
//2.添加功能
addTab() { }
//3.删除功能
removeTab() { }
//1.修改功能
editTab() { }
}
new Tab("#tab")这样我们js文件中的Tab类的大概框架就写出来啦，接下来我们具体来实现一下这四大功能：
查：<切换功能----点击某一tab栏实现此tab栏的切换>
在全局中定义that变量是为之后方法中便于使用，这里是一个小bug哦，友友们一定要注意了。比如在切换功能toggleTab方法中，this所指向的是某一个小li，但在方法里想要访问Tab对象，那么就用到我们的变量that啦。
按理来说，我们获取元素可以直接写在constructor方法里，那为什么在这里我们要重新再写了一个updateNode方法呢，其原因是因为在constructor方法里面的内容程序一开始后就会执行，但之后我们会动态生成小li和一些其他的元素，如果不把小li分离出来，那么动态生成后获取到的小li是不完整的，就会造成报错现象，友友们懂了么，一定要注意这里的小bug哦！
这里想要提醒的只有一点，友友们发现了么，对滴，就是this.toggleTab 后面不能加小括号。
?
?在toggleTab方法里面主要运用排他思想实现tab栏的高亮和相应内容的切换。
增：<添加功能----点击“+”实现新tab栏的增加>
友友们，之后的功能就不全部展示了哦，主要展示一下各种功能方法里面是怎么实现的，其他的一些些步骤都是一样滴——先获取元素，再给元素添加onclick事件就可以啦。
相信有细心的友友已经发现这个方法的最后一行有个that.init()语句，这个语句千万不要忘掉写哦，不写的话也会出现小bug。
删：<删除功能----点击右上角红色按钮即可删除此tab栏和对应内容>
?删除功能需要考虑到用户的使用性是否良好：点击删除后高亮的小li应该属于谁？分为两种情况，一种是高亮的删除后前一个小li亮，另一种是删掉不高亮的那么高亮的应该还属于原来的小li，代码中以及分层去分析了，友友们下去一定要试试哦。
改：<修改功能----双击某一tab栏 此tab栏上文字增添文本框>
?实现修改功能的主要原理是：双击(ondblclick)?tab栏的文字，会变成一个文本框，修改里面的内容后失去焦点或点击enter键修改成功。
小tip：中间还会出现很多小小的bug，友友们在写的时候一定要注意哦！