2. 技术
    3. 面向对象实例：选项卡

    面向对象实例：选项卡

    技术2022-07-17  72

    面向对象的选项卡

    把面向过程的程序，改写成面向对象的形式

    原则： 不能有函数套函数、但可以有全局变量

    过程 onload → 构造函数 全局变量 → 属性 函数 → 方法

    改错 this、事件、闭包、传参

    对象与闭包 通过闭包传递this

    原始选项卡：

    <style> #div1 input {background:white;} #div1 input.active {background:yellow;} #div1 div {width:200px; height:200px; background:#CCC; display:none;} </style> <script> 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 i=0;i<aBtn.length;i++) { aBtn[i].className=''; aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; }; } }; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="aaa" /> <input type="button" value="bbb" /> <input type="button" value="ccc" /> <div style="display:block;">aaa</div> <div>dfsadf</div> <div>erwqerwe</div> </div> </body>
    <style> #div1 input {background:white;} #div1 input.active {background:yellow;} #div1 div {width:200px; height:200px; background:#CCC; display:none;} </style> <script> var aBtn=null; var aDiv=null; window.onload=function () { var oDiv=document.getElementById('div1'); aBtn=oDiv.getElementsByTagName('input'); aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onclick=fnClick; } }; function fnClick() { for(var i=0;i<aBtn.length;i++) { aBtn[i].className='' aDiv[i].style.display='none'; } this.className='active'; aDiv[this.index].style.display='block'; } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="aaa" /> <input type="button" value="bbb" /> <input type="button" value="ccc" /> <div style="display:block;">aaa</div> <div>dfsadf</div> <div>erwqerwe</div> </div> </body>
    Processed: 0.008, SQL: 9