js面向对象的特点：
继承(inheritance)：对象方法和属性的继承
多态(polymorphism)：组件开发
抽象(abstract)：抓住核心问题
封装(encapsulation)：把功能写出方法
面向过程式切换面板实现：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <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() { var div = document.getElementById('div1'); var ipt = oDiv.getElementsByTagName('input'); var divContents = oDiv.getElementsByTagName('div'); for(var i = 0; i < aBtn.length; i++) { ipt[i].index = i; ipt[i].onclick = function() { //隐藏所有，显示所点击面板 for(var i = 0; i < ipt.length; i++) { ipt[i].className = '' ipt[i].style.display = 'none'; } this.className = 'active'; ipt[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;">saysomething</div> <div>sayHello</div> <div>sayGoodbye</div> </div> </body> </html>
面向对象方法：
window.onload = function() { new TabSwitch('div1'); }; function TabSwitch(id) { //将属性挂到this var _this = this;//注意this的改变 var div = document.getElementById(id); this.ipt = div.getElementsByTagName('input'); this.divContents = div.getElementsByTagName('div'); for(var i = 0; i < this.ipt.length; i++) { this.ipt[i].index = i; this.ipt[i].onclick = function() { _this.fnClick(this); }; } }; //函数不嵌套，方法写入原型 TabSwitch.prototype.fnClick = function(ref) { for(var i = 0; i < this.ipt.length; i++) { this.ipt[i].className = '' this.divContents[i].style.display = 'none'; } ref.className = 'active'; this.divContents[ref.index].style.display = 'block'; }