用面向对象的方法实现选项卡切换

// 面向对象的方法
// 创建一个对象,这个对象中有属性有方法
// 属性是需要操作的标签等
// 方法就是实现选项卡效果的程序

    // 定义构造函数
    // 参数:需要执行的tab切换的标签对象,是所有需要执行选项卡效果标签的父级
    
    // 面向对象方法1,建立变量,存储this
    function SetTab1(ele){
        // 先要单独,接收存储参数
        this.ele = ele;
        // 通过参数,来获取需要的标签对象
        this.ullis = ele.querySelectorAll('ul li');
        this.ollis = ele.querySelectorAll('ol li');
        // 在构造函数中,定义的this指向的是实例化对象
    }
    // 定义构造函数的方法
    SetTab1.prototype.fun = function(){
        // 选项卡思路
        // 给所有的ul中的li,添加点击事件,点击时,清除所有的ul,ol中li的样式
        // 给当前点击的li,添加样式,再给对应的ol中的li,添加样式
        
        // 定义一个变量,专门存储this指向
        // 此时的this指向,还是 实例化对象
        // oldThis 变量中 存储的就是 实例化对象
        let oldThis = this;

        // 循环遍历 ul中所有的li
        // 这里的 this.ullis 指向的是 实例化对向中的属性 this.ullis 中存储的数据
        // this.ullis   this.ollis   this.ele 其中的this,应该都是指向实例化对象
        this.ullis.forEach(function(item,key){
            // 给 li标签添加点击事件
            item.addEventListener('click' , function(){
                // 在点击事件中,此时this指向的是绑定点击事件的标签 item
                // 就不是 实例化对象了 
                // 此时,要想正确调用 实例化对象属性的属性值
                // 必须 使用 一个 指向是 实例化对象的内容

                // 先循环遍历所有的ul和ol中的li,清除css样式
                oldThis.ullis.forEach(function(item2 , k){
                    item2.className = '';
                    oldThis.ollis[k].className = '';
                })
                // 给点击的ul,li添加样式
                item.className = 'active';
                // 给对应的ol,li添加样式
                oldThis.ollis[key].className = 'active';
            })
        })
    }

// 获取标签对象
const oDiv = document.querySelector(‘div’);

    // 通过构造函数,生成实例化对象
     const tabs1 = new SetTab1(oDiv);
     
    // 调用实例化对象中的方法,来执行程序,实现选项卡效果
     tabs1.fun();