面向对象的tab选项卡实现

利用最基础的面向对象的思想，实现tab选项卡效果：

效果截图：

aaarticlea/png;base64,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" alt="" />

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象的tab选项卡实现</title>
    <link rel="stylesheet" href="tab.css">
</head>
<body>
    <div class="box" id="box">
        <ul class="conList">
            <li class="conli on">第一张选项卡</li>
            <li class="conli">第二张选项卡</li>
            <li class="conli">第三张选项卡</li>
        </ul>
        <nav class="btnList">
            <a class="btn on" href="javascript:;">第一个控制按钮</a>
            <a class="btn" href="javascript:;">第二个控制按钮</a>
            <a class="btn" href="javascript:;">第三个控制按钮</a>
        </nav>
    </div>
    <script src="tab.js"></script>
</body>
</html>

CSS代码(tab.css)：

*{ margin:; padding: 0 }
/*in为选项卡普通状态，默认不显示*/
.conList .conli{
    display: none;
    width: 600px;
    height: 100px;
    background: orange;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
}
.conList .on{
    display: block;
}
/*控制按钮区域*/
.btnList{
    margin-top: 6px;
}
/*btn为按钮普通状态，默认文字颜色为黑色*/
.btnList .btn{
    display: inline-block;
    color: black;
    background-color: orange;
    padding: 6px;
    text-decoration:none;
}
.btnList .on{
    background-color: #7a4201;
    color: #fff;
}
/*btn_active为按钮选中状态，选中后文字颜色为白色*/
.btn_active{
    color: white;
}

JS代码(tab.js)：

// 定义构造函数
var TabSwitch = function(parent){
    // 获取内容区域
    this.ulList = parent.getElementsByTagName('ul')[0];
    this.liList = this.ulList.getElementsByTagName('li');
    //获取控制按钮
    this.btnList = parent.getElementsByTagName('nav')[0];
    this.btns = this.btnList.getElementsByTagName('a');
    // 添加事件
    this.totalNum = this.btns.length;
    this.curIndex = 0;
    var _this = this;

　　for(var i = 0; i<this.totalNum; i++){
　　　　　//方法一
        // 设置索引
        this.btns[i].index = i;
        // 每个按钮点击事件
        this.btns[i].onclick = function(){
            _this.curIndex = this.index;
            _this.toSwitch();
        }
　　　　 //方法二：利用闭包
        // this.btns[i].onclick = (function(i){
        //     return function(){                
        //         _this.curIndex = i;
        //         _this.toSwitch();
        //     }
        // })(i)
    }
}
TabSwitch.prototype.toSwitch = function(){
    //把所有的控制区域on样式清空
    for(var i = 0; i<this.totalNum; i++){
        this.btns[i].className = 'btn';
        this.liList[i].className = 'conli';
    }
    // 为当前点击按钮设置样式
    this.btns[this.curIndex].className += ' on';
    // 为当前按钮对应选项设置样式
    this.liList[this.curIndex].className += ' on';
}
// 实例
var oBox = document.getElementById('box');
var tab01 = new TabSwitch(oBox);

参考：http://www.cnblogs.com/xiaohuochai/p/4803964.html