javascript选项卡OOP实现方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选项卡</title>
    <style type="text/css">
        #div1 input{background: #ffffff;}
        #div1 input.active{background: yellow;}
        #div1 div{width: 200px; height: 200px; background: red; display: none;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            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';
                    }
                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';
                };
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/>
    <div style="display: block;">1111111</div>
    <div>2222222</div>
    <div>3333333</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象选项卡</title>
    <style type="text/css">
        #div1 input{background: #ffffff;}
        #div1 input.active{background: yellow;}
        #div1 div{width: 200px; height: 200px; background: red; display: none;}
    </style>
    <script type="text/javascript">
        //window.onload变成构造函数，变量变成属性，函数变成方法
        function TabSwitch(id)
        {
            var _this = this;//_this指的是类TabSwitch实例化的对象
            var oDiv = document.getElementById(id);
            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.fnClick(this);//this指的是aBtn[i]，
                };
            }
        }
        TabSwitch.prototype.fnClick = function(oBtn)
        {
            for(var j=0;j<this.aBtn.length;j++)
            {
                this.aBtn[j].className = '';
                this.aDiv[j].style.display = 'none';
            }
            //this.className = 'active';
            this.aDiv[oBtn.index].style.display = 'block';
            this.className = 'active';
        }
        window.onload = function()
        {
            var oTabSwitch = new TabSwitch('div1');
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/>
    <div style="display: block;">1111111</div>
    <div>2222222</div>
    <div>3333333</div>
</div>
</body>
</html>

 

posted @ 2017-11-01 17:30  我将枕中记忆抹去任岁月浮光掠影  阅读(133)  评论(0)  编辑  收藏  举报