案例：面向对象-实现tab栏切换（选项卡）

功能

1：点击tab栏，可以实现切换

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

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

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

准备工作

1：获取标题元素
2：获取内容元素
3：获取删除的小按钮 x号  +号
4：新建js文件，定义类，添加需要的属性和方法(切换，删除，添加，修改)

CSS部分略过

页面元素

<main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive">
                        <span>测试1</span>
                        <span class="iconfont icon-guanbi"></span>
                    </li>
                    <li>
                        <span>测试2</span>
                        <span class="iconfont icon-guanbi"></span>
                    </li>
                    <li>
                        <span>测试3</span>
                        <span class="iconfont icon-guanbi"></span>
                    </li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

第一步 整体

创建类获取到页面元素，列出所需函数，实例化对象。

// 定义teb标签类
class Tab {
   
  constructor(id) {
   
    // 获取 最外层id=tab的div元素
    this.main = document.querySelector(id);
    // 标题元素ul
    this.ulTit = this.main.querySelector(".fisrstnav ul");
    // 内容元素
    this.cons = this.main.querySelector(".tabscon")