tab 选项卡的封装

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            background: #f6f3f3;
            border: 1px solid #ccc;
        }
        .active{
            background: red;
        }
        #tabBox div{
            width: 300px;
            height: 250px;
            display: none;
            padding: 10px;
            background: #e9d4d4;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div id="tabBox">
        <input type="button" value="游戏" class="active">
        <input type="button" value="旅行">
        <input type="button" value="音乐">
        <div style="display: block">芳华</div>
        <div>澳大利亚</div>
        <div>yellow</div>
    </div>
</body>
</html>

第一种方法：面向过程的写法

        window.onload = function () {
            var tabBox = document.getElementById('tabBox');
             var tabBtn = tabBox.getElementsByTagName('input');
             var tabDiv = tabBox.getElementsByTagName('div');
             for(var i=0;i<tabBtn.length;i++){
                tabBtn[i].index = i;
                tabBtn[i].onclick = function () {
                    for(var k= 0;k<tabDiv.length;k++){
                        tabBtn[k].className='';
                        tabDiv[k].style.display='none';
                    }
                    this.className = 'active';
                    tabDiv[this.index].style.display='block';
                }
             }
         }

第二种方法：面向对象的写法

        window.onload = function () {
            var tab = new Tab('tabBox','input' , 'div');
        };
        function Tab(id,btn,Content) {
            var tabBox = document.getElementById(id);
            this.tabBtn = tabBox.getElementsByTagName(btn);
            this.tabDiv = tabBox.getElementsByTagName(Content);
            for(var i=0; i<this.tabBtn.length ; i++){
                this.tabBtn[i].index = i;
                var _this = this;//this指向的是var tab = new Tab() ，即tab这个对象，注意是对象。
                this.tabBtn[i].onclick = function () {
                    _this.clickBtn(this);//这句话里面的_this指向的是var tab = new Tab()构造函数这个对象，括号里面的this指向的点击事件对应的这个对象，这里的指的是input这个标签
                };
            }
        }
        Tab.prototype.clickBtn = function (btn) {
            for(var k = 0;k<this.tabBtn.length;k++){
                this.tabBtn[k].className = '';//clickBtn这个方法里面的this指向的是var tab = new Tab() ，即tab这个对象
                this.tabDiv[k].style.display = 'none';
            }
            btn.className = 'active';
            this.tabDiv[btn.index].style.display = 'block';
        }

封装成一个通用的tab.js，使用tab切换的时候直接引用就可以

        参数说明 ：第一个参数是整个Tab切换最外层的id名，第二个参数是切换按钮的标签名，第三个参数是要切换内容的标签名，我们在调用的时候要首先创建一个Tab这个对象，然后再调用这个构造行数；例如：  var tab = new Tab('tabBox','input' , 'div');
        function Tab(id,btn,Content) {
            var tabBox = document.getElementById(id);
            this.tabBtn = tabBox.getElementsByTagName(btn);
            this.tabDiv = tabBox.getElementsByTagName(Content);
            for(var i=0; i<this.tabBtn.length ; i++){
                this.tabBtn[i].index = i;
                var _this = this;//this指向的是var tab = new Tab() ，即tab这个对象，注意是对象。
                this.tabBtn[i].onclick = function () {
                    _this.clickBtn(this);//这句话里面的_this指向的是var tab = new Tab()构造函数这个对象，括号里面的this指向的点击事件对应的这个对象，这里的指的是input这个标签
                };
            }
        }
        Tab.prototype.clickBtn = function (btn) {
            for(var k = 0;k<this.tabBtn.length;k++){
                this.tabBtn[k].className = '';//clickBtn这个方法里面的this指向的是var tab = new Tab() ，即tab这个对象
                this.tabDiv[k].style.display = 'none';
            }
            btn.className = 'active';
            this.tabDiv[btn.index].style.display = 'block';
        }

参考链接：http://www.cnblogs.com/chiangchou/p/js-oop2.html

猜你喜欢