首页 / 脚本样式 / JavaScript / 学习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>

/*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; }

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）;