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

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

效果图：

1、功能说明

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

 

第一张选项卡
  
第二张选项卡
  
第三张选项卡
 
第一个控制按钮
  第二个控制按钮
  第三个控制按钮
 

3、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代码说明

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 

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