标签：for pat div 面向 document btn htm type width
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>面向对象 选项卡</title> <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(){ new TabSwitch(‘div1‘); } function TabSwitch(id){ var _this=this; 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); } } } TabSwitch.prototype.fnClick=function (oBtn){ for(var i=0;i<this.aBtn.length;i++){ this.aBtn[i].className=‘‘; this.aDiv[i].style.display=‘none‘; } oBtn.className=‘active‘; this.aDiv[oBtn.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>bbbb</div> <div>cccc</div> </div> </body> </html>
标签：for pat div 面向 document btn htm type width
原文地址：https://www.cnblogs.com/sunnywindycloudy/p/13022433.html
