js使用面向对象实现选项卡

来源：互联网发布：小蜜蜂网络编辑：程序博客网时间：2024/04/29 15:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>选项卡</title>    <style>        #div1{            height: 500px;            width: 500px;            margin:0 auto;        }        #div1 input{            background-color: #8a7dbe;        }        #div1 input.active{            background-color: #4CAE09;        }        #div1 div{            width: 300px;            height:200px;            display: none;        }        #div1 div.active1{            background-color: #2aabd2;        }    </style></head><body><div id="div1">    <input type="button" value="aaa">    <input type="button" value="bbb">    <input type="button" value="ccc">    <div class="active1" style="display: block">aaa</div>    <div>bbb</div>    <div>ccc</div></div></body><script>    //使用面向对象思想实现选项卡    window.onload= function () {      new load('div1');    };    function load(id) {     //构造函数        var _this=this;       //this指当前的新建对象,div1        var oDiv = document.getElementById(id);        this.aBtn = document.getElementsByTagName('input');    //abtn变为当前属性        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.click(this);     //this指abtn[i]            }        }    }   load.prototype.click= function(oBtn) {     //用原型添加方法        for(var j=0;j<this.aBtn.length;j++){   //this指div1            this.aBtn[j].className='';            this.aDiv[j].style.display='none';        }        this.className='active';        this.aDiv[oBtn.index].style.display='block';        this.aDiv[oBtn.index].className='active1';    }</script></html>
0 0