javascript面向对象系列4——实例篇(最简单的面向对象选项卡)

【功能说明】

点击三个按钮分别显示对应的选项卡

【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>

【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;
}

【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);

【效果展示】

【源码查看】