JavaScript面向对象--tab栏--增删改查操作

 上面是我的代码

下面是我模仿的实例，可以自己加css变漂亮

面向对象--tab栏切换

功能需求：

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

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

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

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

抽取对象：Tab对象

1.该对象具有切换功能

2.该对象具有添加功能

3.该对象具有删除功能

4.该对象具有修改功能

 增删改查

添加功能

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

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

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

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

5.现在的高级做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中

6. appendChild不支持追加字符串的元素，insertAdjacentHTML支持追加字符串的元素

删除功能

1. 点击×可以删除当前的li选项卡和当前的section

2. x是没有索引号的，但是它的父亲li有索引号，这个索引号正是我们想要的索引号

3. 所以核心思路是：点击叉号可以删除这个索引号对应的li和section

编辑功能

1. 双击选项卡li或者section里面的文字，可以实现修改功能

2. 双击事件是： ondblclick

3. 如果双击文字，会默认选定文字，此时需要双击禁止选中文字

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

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

留意+号，和×号

    
        
        
        
    
    
        
        

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

                
                
                
                
                

                    
测试1
                    
测试2
                    
测试3