1、功能需求
点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项....抽象对象: Tab对象
该对象具有切换功能
该对象具有添加功能
该对象具有删除功能
该对象具有修改功能
2、案例准备
获取到标题元素
获取到内容元素
获取到删除的小按钮...x号
新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)
时刻注意this的指向问题
3、切换
为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引
this.lis...:创建新的选项卡li和新的内容section
第二步:把创建的两个元素追加到对应的父元素中....现在高级做法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
appendChild不支持追加字符串的子元素, insertAdjacentHTML支持追加字符串的元素