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>

工欲善其事必先利其器

相关阅读:
prototype.js超强的javascript类库
 MySQL Server Architecture
Know more about RBA redo block address
MySQL无处不在
 利用Oracle Enterprise Manager Cloud Control 12c创建DataGuard Standby
LAMP Stack
9i中DG remote archive可能导致Primary Database挂起
 Oracle数据库升级与补丁
 Oracle为何会发生归档日志archivelog大小远小于联机重做日志online redo log size的情况？
Oracle Ksplice如何工作？How does Ksplice work?
原文地址：https://www.cnblogs.com/fengyouqi/p/7770816.html