首页 > 代码库 > js面向对象实现切换面板
js面向对象实现切换面板
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‘; }
js面向对象实现切换面板
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。