面向对象2--选项卡的改写

╰+哭是因爲堅強的太久メ 2022-07-14 02:43 95阅读 0赞

**1.选项卡**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 input{background:#ccc} #div1 .active{background:yellow} #div1 div{width:200px;height:200px;background:#eee;border:1px solid red;display:none;} </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">kashdkhsfkasjhsfsdf</div> <div>sdfsdfsdfsfsdf</div> <div>dfghdfgdfghfewedfg</div> </div> </body> </html> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oIpt = oDiv1.getElementsByTagName('input'); var oDiv = oDiv1.getElementsByTagName('div'); var i=0; for(i=0;i<oIpt.length;i++){ oIpt[i].index=i; oIpt[i].οnclick=function(){ for(i=0;i<oIpt.length;i++){ oIpt[i].className =''; oDiv[i].style.display ='none'; } this.className='active'; oDiv[this.index].style.display='block'; } } } </script>

**2.改写**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 input{background:#ccc;} #box1 .active{background:yellow;} #box1 div{width:200px;height:200px;background:#eee;border:1px solid red;display:none;} </style> </head> <body> <div id="box1"> <input class="active" type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div style="display:block">sdfsdfsdfsdf</div> <div>sdsddddddddddgfg</div> <div>asdfsdfsxcvxcv</div> </div> <div> 改写 1前提：所有东西都在onload里面 2改写：不能有函数嵌套，但是可以有全局变量 3onload ->构造函数 全局的变量->属性 函数 ->方法 4改错 this this啥时候会出问题呢 1.定时器 2.事件 </div> </body> </html> <script> var oIpt=null; var oDiv=null; window.onload = function(){ var oBox = document.getElementById('box1'); oIpt = oBox.getElementsByTagName('input'); oDiv = oBox.getElementsByTagName('div'); for(var i=0;i<oIpt.length;i++){ oIpt[i].index=i; oIpt[i].οnclick=Tab; } } function Tab(){ for(var i=0;i<oIpt.length;i++){ oIpt[i].className=''; oDiv[i].style.display='none'; } this.className='active'; oDiv[this.index].style.display='block'; } </script>

**3.改写2**

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 input{background:#ccc;} #box1 .active{background:yellow;} #box1 div{width:200px;height:200px;background:#eee;border:1px solid red;display:none;} </style> </head> <body> <div id="box1"> <input class="active" type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div style="display:block">sdfsdfsdfsdf</div> <div>sdsddddddddddgfg</div> <div>asdfsdfsxcvxcv</div> </div> <div> 改写 1前提：所有东西都在onload里面 2改写：不能有函数嵌套，但是可以有全局变量 </div> </body> </html> <script> window.onload = function(){ var oTab = new TabSwith('div1'); } function TabSwith(){ var oBox = document.getElementById('box1'); this.oIpt = oBox.getElementsByTagName('input'); this.oDiv = oBox.getElementsByTagName('div'); var _this=this; for(var i=0;i<this.oIpt.length;i++){ this.oIpt[i].index=i; this.oIpt[i].οnclick=function(){ _this.Tab(this); } } } TabSwith.prototype.Tab=function(oBtn){ for(var i=0;i<this.oIpt.length;i++){ this.oIpt[i].className=''; this.oDiv[i].style.display='none'; } oBtn.className='active'; this.oDiv[oBtn.index].style.display='block'; } </script>