面向对象原型prototype
1.Object.prototype 类原型添加函数和对象添加函数区别
2.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1>div{ display: none;width: 100px;height: 100px;background-color: #999; } #div1>input.active{ background-color: yellow; } </style> <script> function TabGroup(aTab){ this.aTab = aTab||[]; } TabGroup.prototype.ChangeTab = function(iIndex){ this.aTab[iIndex].active(); } function Tab(oBtn,oDiv,oTabGroup){ this.oBtn = oBtn; this.oDiv = oDiv; this.oTabGroup = oTabGroup; } Tab.prototype.active = function(){ var oTabGroup = this.oTabGroup; var aTab = oTabGroup.aTab; for(var i=0;i<aTab.length;i++){ aTab[i].oBtn.className = ''; aTab[i].oDiv.style.display = 'none'; } this.oBtn.className = 'active'; this.oDiv.style.display = 'block'; } window.onload = function(){ var oDiv = document.getElementById('div1'); var aBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); var oTabGroup = new TabGroup(); for(var i=0;i<aBtn.length;i++){ let tab = new Tab(aBtn[i],aDiv[i],oTabGroup); oTabGroup.aTab.push(tab); aBtn[i].onclick = function(){ tab.active(); }; } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="a" /> <input type="button" value="b" /> <input type="button" value="c" /> <div style="display: block"> a </div> <div> b </div> <div> c </div> </div> </body> </html>