面向对象版Tab

步骤一:下载五张图片,引入html,同时编写CSS样式,程序如下;





Document



  • 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

你可能感兴趣的:(面向对象版Tab)