博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

点击按钮切换内容

Posted on 2017-03-02 12:33  程序员入门到放弃  阅读(243)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div1 div{
        width: 200px;height: 200px;
        border:1px solid #999;
        display: none;
    }
    .active{
        background:red;
    }
    </style>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display: block;">111111111111</div>
        <div >222222222222</div>
        <div >333333333333</div>

    </div>

    <script>
    window.onload = function(){
        var t1 = new Tab();
        t1.init();
    }
    // 全局变量就是属性
    function Tab(){
        this.oParent = document.getElementById("div1");
        this.aInput = this.oParent.getElementsByTagName("input");
        this.aDiv = this.oParent.getElementsByTagName("div");
    }
// 函数就是方法
    Tab.prototype.init = function(){
        var This = this; 
        console.log(111,this)
        for(var i=0 ; i < this.aInput.length; i++){
            this.aInput[i].index = i;

            this.aInput[i].onclick = function(){
                console.log(222,this)

                // This.change(this);
                 for(var i=0 ; i < This.aInput.length; i++){
                        This.aInput[i].className = "";
                         This.aDiv[i].style.display = "none";
                     }
                     this.className = "active";
                     This.aDiv[this.index].style.display = "block";
                 }
        
            }
        }

    </script>
</body>
</html>