（针对于第一次学习面向对象）
方法：把面向过程的程序改写成面向对象的形式。
原则：不能有函数嵌套，但可以有全局变量。
过程：window.onload（初始化整个程序）>>>>>>>>>>>构造函数（初始化整个对象）
全局变量>>>>>>>>>>>>>>>属性
函数>>>>>>>>>>>方法
改bug: this,事件，闭包，传参。
面向过程选项卡代码如下：
<style type="text/css">
#div1 input{background: white;}
#div1 input.active{background: yellow;}
#div1 div{width: 200px;height: 200px;background: grey;display: none;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].οnclick=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
aBtn.className='active';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display: block;">123</div>
<div>456</div>
<div>789</div>
</div>
面向对象选项卡代码如下：
<script type="text/javascript">
window.οnlοad=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].οnclick=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>
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
