面向对象案例

目录

1 面向对象版 tab 栏切换

2 面向对象版 tab 栏切换 添加功能

3 面向对象版 tab 栏切换 删除功能

4 面向对象版 tab 栏切换 编辑功能

5 最终结果展示

6  参考代码如下： 

index.html文件

tab.js文件

 tab.css文件

style.css文件

---

 

1 面向对象版 tab 栏切换

功能需求:

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

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

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

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

抽象对象:  Tab 对象

1. 该对象具有切换功能

2. 该对象具有添加功能

3. 该对象具有删除功能

4. 该对象具有修改功能

2 面向对象版 tab 栏切换 添加功能

     1.点击 + 可以实现添加新的选项卡和内容

2. 第一步 : 创建新的选项卡 li 和 新的 内容 section

3. 第二步 : 把创建的两个元素追加到对应的父元素中 .

4. 以前的做法 :  动态创建元素 createElement   , 但是元素里面内容较多 , 需要 innerHTML 赋值 , 在 appendChild 追加到父元素里面 .

5. 现在高级做法 :   利用