js 选项卡问题。新手求指导。。。

<style type="text/css">
    body{
        margin:0 auto;
        background: green;
    }
    #div1{
        margin:0 auto;
        width:400px;
        border:1px solid #fff;
    }
    #div1 div{
        height:200px;
        width:200px;
        border:1px solid #ddf;
        display:none;
    }
    .active{
        background:#fdf;
    }
</style>
<script>
    window.onload=function(){
        var oDiv = document.getElementById('div1')
        var oInput = oDiv.getElementsByTagName('input')
        var oCon = oDiv.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++){
                    oInput[i].className='';
                    oCon[i].style.display = 'none'

                }
                this.className = "active";
                oCon [this.index].style.display ='block';
            }
        }
    }
</script>
<body>
    <div id="div1">
        <input class= "active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display:block;">aaaaaaaaaaaaa</div>
        <div>bbbbbbbbbbb</div>
        <div>ccccccccccc</div>
    </div>
</body>

为什么一个选项要用到2次for循环。而且我这个哪里写错了。。。都没有效果出来。。。

小黄金