js面向对象选项卡

window.onload=function() //面向对象
{
var tab=new tabSwitch("div1");
var tab=new tabSwitch("div2");
};

function tabSwitch(id)
{
var obox=document.getElementById("id");
this.abtn=document.getElementsByTagName('input');
this.odiv=document.getElementsByTagName('div');

for(var i=0;i<this.abtn.length;i++)
{
var _this=this;
this.abtn[i].index=i;
this.abtn[i].onclick=function()
{
_this.Otab(this);
};
};
};

tabSwitch.prototype.Otab=function (Obtn)
{

for(var i=0;i<this.abtn.length;i++)
{
this.odiv[i].style.display="none";
this.abtn[i].className="";
}
this.odiv[Obtn.index].style.display="block";
Obtn.className="active";

};

</script>

<script type="text/javascript">  //面向过程
window.onload=function()
{
var oinput=document.getElementsByTagName("input");
var odiv=document.getElementsByTagName("div");
for(var i=0;i<oinput.length;i++)
{
oinput[i].index=i;
oinput[i].onclick=function()
{
for(var i=0;i<oinput.length;i++)
{
odiv[i].style.display="none";
oinput[i].className="";
};
odiv[this.index].style.display="block";
this.className="active";
};
};
};
</script>

<span id="div1" style="display:block;width:500px; background-color:none;">
<input type="button" value="first" class="active" ID="in"/>
<input type="button" value="two" ID="in"/>
<input type="button" value="three" ID="in"/>
<input type="button" value="four"  ID="in"/>
<input type="button" value="five" ID="in"/>
<input type="button" value="sixth" ID="in"/>
<div style="display:block;">1111</div>
<div >22</div>
<div >33</div>
<div >44</div>
<div >55</div>
<div >第六个显示区域</div>
</span>