学习javascript面向对象 实例讲解面向对象选项卡

本文实例讲解了最简单的面向对象选项卡实现方法，分享给大家供大家参考，具体内容如下

效果图：

1、功能说明

点击三个按钮分别显示对应的选项卡 2、HTML代码说明

rush:xhtml;">

Box" id="Box">

3、css重点代码说明

rush:css;"> /*in为选项卡普通状态，默认不显示*/ .in,.in_active{ display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center; } /*in_active为选项卡选中状态，选中后显示*/ .in_active{ display: block; } /*con为按钮普通状态，默认文字颜色为黑色*/ .con,.con_active{ color: black; background-color: orange; } /*con_active为按钮选中状态，选中后文字颜色为白色*/ .con_active{ color: white; }

4、js代码说明

rush:js;"> function Tab(obj){ /*元素获取*/ //获取选项卡展示部分 this.oList = obj.getElementsByTagName('ul')[0]; this.aIn = this.oList.getElementsByTagName('li'); //获取选项卡控制部分 this.oConList = obj.getElementsByTagName('nav')[0]; this.aCon = this.oConList.getElementsByTagName('a'); /*变量设置*/ //选项卡张数 this.count = this.aIn.length; //当前第几张 this.cur = 0; var _this = this;

for(var i = 0; i < this.count; i++){
//设置索引
this.aCon[i].index = i;
//给按钮添加事件
this.aCon[i].onclick = function(){
_this.cur = this.index;
_this.switch();
}
}
}
Tab.prototype.switch = function(){
//去掉所有
for(var i = 0; i < this.count; i++){
this.aIn[i].className = 'in';
this.aCon[i].className = 'con';
}
//显示当前
this.aIn[this.cur].className = 'in_active';
this.aCon[this.cur].className = 'con_active';
}
//获取选项卡元素
var oBox = document.getElementById('Box');
//构造选项卡对象
var tab1 = new Tab(oBox);

希望本文所述对大家学习javascript面向对象有所帮助。

原文地址：https://www.jb51.cc/js/50763.html