javascript手写OOP选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container {
            margin: 0 auto;
            width: 420px;
        }
        input {
            width: 80px;
            background-color: #ffffff;
        }
        input.active {
            background-color: grey;
        }
        .container div {
            text-align: center;
            width: 420px;
            height: 300px;
            display: none;
            background-color: rosybrown;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDivContainer = document.getElementsByClassName('container')[0];
            var aDiv = oDivContainer.getElementsByTagName('div');
            var aBtn = oDivContainer.getElementsByTagName('input');
            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].index = i;
                aBtn[i].onclick = function(){
                    for(var j=0;j<aBtn.length;j++)
                    {
                        aBtn[j].className = "";
                        aDiv[j].style.display = "none";
                    }
                    aBtn[this.index].className = "active";
                    aDiv[this.index].style.display = "block";
                };
            }
        };
    </script>
</head>
<body>
<div class="container">
    <input type="button" class="active" value="react"/>
    <input type="button" value="node"/>
    <input type="button" value="php"/>
    <input type="button" value="asp"/>
    <input type="button" value="javascript"/>
    <div style="display: block">react</div>
    <div>node</div>
    <div>php</div>
    <div>asp</div>
    <div>javascript</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container {
            margin: 0 auto;
            width: 420px;
        }
        input {
            width: 80px;
            background-color: #ffffff;
        }
        input.active {
            background-color: grey;
        }
        .container div {
            text-align: center;
            width: 420px;
            height: 300px;
            display: none;
            background-color: rosybrown;
        }
    </style>
    <script type="text/javascript">
        function TabSwitch(oDiv)
        {
            var _this = this;
            this.aBtn = oDiv.getElementsByTagName("input");
            this.aDiv = oDiv.getElementsByTagName("div");
            for(var i=0;i<this.aBtn.length;i++)
            {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function(){
                    _this.switchGuo(this);  //this 代表aBtn[i]        _this 代表oDiv
                };
            }
        }
        TabSwitch.prototype.switchGuo = function(oBtn){
            for(var j=0;j<this.aBtn.length;j++)
            {
                this.aBtn[j].className = '';
                this.aDiv[j].style.display = 'none';
            }
            this.aBtn[oBtn.index].className = 'active';
            this.aDiv[oBtn.index].style.display = 'block';
        };
        window.onload = function(){
            var oDiv = document.getElementsByClassName('container')[0];
            var oTabSwitch = new TabSwitch(oDiv);
        };
    </script>
</head>
<body>
<div class="container">
    <input type="button" class="active" value="react"/>
    <input type="button" value="node"/>
    <input type="button" value="php"/>
    <input type="button" value="asp"/>
    <input type="button" value="javascript"/>
    <div style="display: block">react</div>
    <div>node</div>
    <div>php</div>
    <div>asp</div>
    <div>javascript</div>
</div>
</body>
</html>

工欲善其事必先利其器