传统选项卡和面向对象的选项卡的区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>面向对象选项卡</title> <style type="text/css"> .div1 div{ width: 200px; height: 200px; border: 1px solid #000; display: none; } .active{ background: pink; } </style> </head> <body> <div class="div1"> <input class="active" type="button" name="" id="" value="1" /> <input type="button" name="" id="" value="2" /> <input type="button" name="" id="" value="3" /> <div style="display: block;">111111111111</div> <div>22222222222222</div> <div>3333333333333</div> </div> <div class="div1 div2"> <input class="active" type="button" name="" id="" value="1" /> <input type="button" name="" id="" value="2" /> <input type="button" name="" id="" value="3" /> <div style="display: block;">111111111111</div> <div>22222222222222</div> <div>3333333333333</div> </div> </body> <script type="text/javascript"> // 传统选项卡 /*window.οnlοad=function(){ var div1=document.querySelector('.div1') var div2=div1.querySelectorAll('div') var input=div1.querySelectorAll('input') for(var i=0;i<input.length;i++){ input[i].index=i; input[i].οnclick=function(){ for(var i=0;i<input.length;i++){ input[i].classList.remove('active') div2[i].style.display='none' } this.classList.add('active') div2[this.index].style.display='block'; } } }*/ // 面向对象选项卡 //先变形 //尽量不要出现函数嵌套函数 //可以有全局变量 /*var div1=null; var div=null; var input=null; window.οnlοad=function(){ div1=document.querySelector('.div1') div=div1.querySelectorAll('div') input=div1.querySelectorAll('input') init() } function init(){ for(var i=0;i<input.length;i++){ input[i].index=i; input[i].οnclick=change } } function change(){ for(var i=0;i<input.length;i++){ input[i].classList.remove('active') div[i].style.display='none' } this.classList.add('active') div[this.index].style.display='block'; }*/ /*改成面向对象*/ window.onload=function(){ var t = new Tab('.div1'); t.init() var t1 = new Tab('.div2'); t1.init() t1.payll() } function Tab(className){ this.div1=document.querySelector(className); this.input=this.div1.querySelectorAll('input'); this.div=this.div1.querySelectorAll('div') this.num=0; } Tab.prototype.init=function(){ var This=this; for (var i = 0; i < this.input.length; i++) { this.input[i].index=i; this.input[i].onclick=function(){ This.change(this) } } } Tab.prototype.change=function(obj){ for (var i = 0; i < this.input.length; i++) { this.input[i].classList.remove('active') this.div[i].style.display='none'; } obj.classList.add('active') this.div[obj.index].style.display='block' } Tab.prototype.payll=function(){ var thas=this; setInterval(function(){ if (thas.num==thas.input.length-1) { thas.num=0 } else{ thas.num++; } for (var i = 0; i < thas.input.length; i++) { thas.input[i].classList.remove('active') thas.div[i].style.display='none'; } thas.input[thas.num].classList.add('active') thas.div[thas.num].style.display='block' },3000) } </script> </html>