js面向对象实现切换面板
2021-07-11 07:05
标签：doc value dex ati 方法 block onclick tag 对象 js面向对象的特点： 继承(inheritance)：对象方法和属性的继承 多态(polymorphism)：组件开发 抽象(abstract)：抓住核心问题 封装(encapsulation)：把功能写出方法 面向过程式切换面板实现： 面向对象方法： js面向对象实现切换面板 标签：doc value dex ati 方法 block onclick tag 对象 原文地址：http://www.cnblogs.com/rlann/p/7086934.htmlDOCTYPE 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;">saysomethingdiv>
div>sayHellodiv>
div>sayGoodbyediv>
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‘;
}