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>