欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-17 15:33:52
...
本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下

效果图:

学习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面向对象有所帮助。