原生JS面向对象 Tab栏切换案例

---

1.实现效果

---

2.功能需求

---

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

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

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

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

3.抽象对象

---

抽象对象：Tab对象

• 该对象具有切换功能

• 该对象具有添加功能

• 该对象具有删除功能

• 该对象具有修改功能

4.切换功能实现

---

首先把大家可以先看看html结构，防止获取元素和类名的时候不知道获取的是什么：

Js 面向对象 动态添加标签页

• 测试1
• 测试2
• 测试3
• +

  测试1
  测试2
  测试3

  在这一节里我们要实现的效果：

  

  示例代码：

  var that;

  class tab{

  constructor(id){

  //获取元素

  that = this;

  this.main = document.querySelector(id);

  this.lis = this.main.querySelectorAll(‘li’);

  this.sections &#