面向对象的tab切换封装函数 

/**
 * 选项卡
 * @param {Object} id 选项卡id
 */
function Tab(id){
    var tabBox = document.getElementById(id);
    this.tabBtn = tabBox.getElementsByTagName('input');
    this.tabDiv = tabBox.getElementsByTagName('div');
    
    for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        var _this = this;
        this.tabBtn[i].onclick = function(){
            _this.clickBtn(this);
        };
    }
};
/**
 * 为Tab原型添加点击选项卡方法
 * @param {Object} btn 点击的按钮
 */
Tab.prototype.clickBtn = function(btn){
    for(var j=0;j<this.tabBtn.length;j++){
        this.tabBtn[j].className='';
        this.tabDiv[j].style.display='none';
    }
    btn.className='active';
    this.tabDiv[btn.index].style.display='block';
};

<!DOCTYPE html>
<html>
<head>
    <style>
        #tabBox input {
            background: #F6F3F3;
            border: 1px solid #FF0000;
        }
        #tabBox .active {
            background: #E9D4D4;
        }
        #tabBox div {
            width:300px; 
            height:250px; 
            display:none;
            padding: 10px;
            background: #E9D4D4;
            border: 1px solid #FF0000;
        }
    </style>
    <meta charset="utf-8" />
    <title>选项卡</title>
    <script>
        
        window.onload = function(){
            var tab = new Tab("tabBox");
        }
    
        /**
         * 选项卡
         * @param {Object} id：选项卡id
         */
        function Tab(id){
            var tabBox = document.getElementById(id);
            
            this.tabBtn = tabBox.getElementsByTagName('input');
            this.tabDiv = tabBox.getElementsByTagName('div');
            
            for(var i=0;i<this.tabBtn.length;i++){
                this.tabBtn[i].index = i;
                var _this = this;
                this.tabBtn[i].onclick = function(){
                    //注意参数this代表的是this.tabBtn[i]，即input按钮
                    _this.clickBtn(this);
                };
            }
        };
        //将点击的按钮以参数的形式传入
        Tab.prototype.clickBtn = function(btn){
            for(var j=0;j<this.tabBtn.length;j++){
                this.tabBtn[j].className='';
                this.tabDiv[j].style.display='none';
            }
            btn.className='active';
            this.tabDiv[btn.index].style.display='block';
        };
        
    </script>
</head>

<body>
    <div id="tabBox">
        <input type="button" value="游戏" class="active" />
        <input type="button" value="旅行" />
        <input type="button" value="音乐" />
        <div style="display:block;">GTA5、孤岛惊魂</div>
        <div>澳大利亚、西藏</div>
        <div>暗里着迷、一生有你</div>
    </div>
</body>
</html>

 

posted @ 2019-02-12 17:18  拾荒哲  阅读(225)  评论(0)    收藏  举报