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

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

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


<div class="box" id="box">
<ul class="list">
<li class="in_active">第一张选项卡</li>
<li class="in">第二张选项卡</li>
<li class="in">第三张选项卡</li>
</ul>
<nav class="conList">
<a class="con_active" href="javascript:;">第一个控制按钮</a>
<a class="con" href="javascript:;">第二个控制按钮</a>
<a class="con" href="javascript:;">第三个控制按钮</a>
</nav>
</div>

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


有用  |  无用 取消

猜你喜欢