1.面向对象版tab 栏切换
1.1功能需求
点击 tab栏,可以切换效果.
点击 + 号, 可以添加 tab 项和内容项.
点击 x 号, 可以删除当前的tab项和内容项....双击tab项文字或者内容项文字可以修改里面的文字内容
1.2案例准备
获取到标题元素
获取到内容元素
获取到删除的小按钮 x号
新建js文件,定义类,添加需要的属性方法(切换,删除...,增加,修改)
时刻注意this的指向问题
1.3切换
为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引
this.lis[i].index = i;
this.lis...x绑定点击事件
this.remove[i].onclick = this.removeTab;
获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容
removeTab...(index);
// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素
that.lis[index].remove();
that.sections