使用面向对象思想的小项目------tab栏切换

目录

一、功能

二、步骤

三、代码获取

---

一、功能

1.点击tab栏，可以切换效果

2.点击+号，可以添加tab栏和内容项

3.点击x号，可以删除当前的tab项和内容项

4.双击tab项文字或者内容项文字，可以修改里面的文字内容

---

二、步骤

抽取对象tab对象

切换功能

①添加点击事件，切换

②添加一个清除类的方法

③调用清除方法，为点击li添加点击样式的类

添加功能

①创建新的选项卡li和新的内容section

②把创建的两个元素追加到对应的父元素中

③利用insertAdjacentHTML()可以直接把字符串元素添加到父元素中

注意：appendChild()不支持追加字符串子元素 insertAdjacentHTML支持追加字符串元素

删除功能

①x没有索引号,但是他的父亲li有索引号，这个索引号正是我们想要的索引号

②点击x号可以删除这个索引号对应的li和section

修改功能

双击事件ondblclick

双击禁止选中文字

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

双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后把文本框输入的值给原先的元素即可

---

三、代码获取

                           点击这里可跳转到仓库