面向对象版Tab

步骤一：下载五张图片，引入html，同时编写CSS样式，程序如下；

    

        
1
        
2
        
3
        
4
        
5
    
    

        

        

        

        

        

    

步骤二：重点部分，面向对象实现Tab切换效果；
1.定义一个空的构造函数；

function Tab(){}

2.通过 "new+构造函数"创建一个实例对象；

var tab=new Tab();

3.将需要操作的元素作为实例对象的属性添加到构造函数中；

function Tab(){
    this.box = document.querySelector(".content");
    this.ulis = this.box.querySelectorAll("ul li");
    this.olis = this.box.querySelectorAll("ol li");
}

4.通过Tab.prototype.init给函数中获得的属性绑定事件；

Tab.prototype.init = function(){
    for(let i=0;i{
            // 调用change方法来实现切换效果
            this.change(i);
          
        }
    }
}

5.通过Tab.prototype.change给函数中获得的属性绑定事件；

Tab.prototype.change = function(j){
    // 将带有active 的ul li的active赋值为空
    for(var i=0;i

6.最后调用属性绑定事件;

tab.init()

初始样式：

捕获.PNG

点击事件后样式：

捕获1.PNG

补充：实例原型构造函数的关系
1. 实例对象属性写在构造函数中,而方法要写在原型对象中，实例对象通过(实例对象.方法名)就可以引用，
2.为原型对象添加方法的方式为：
构造函数名.prototype.方法名
三者关系如下图所示：

1566482344447.png