强大的jquery-制作选项卡

最近在学习jquery，特地把今天写的一个选项卡源码贴出来。只是做只是梳理，大神们请不要吐槽，如果有更好的方法，欢迎指点。谢谢。

css

<style>
#tab div{ width:200px; height:200px; border:#33F 1px solid; display:none}
.active{ background:red}
</style>　

引入jquery

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

1、原生的js

 window.onload=function(){
         var oDiv=document.getElementById('tab');
         var oInput=oDiv.getElementsByTagName('input');
         var Childdiv=oDiv.getElementsByTagName('div');
         //debugger;
         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='';
                     Childdiv[i].style.display='none';
                     }
                 this.className='active';
                 Childdiv[this.index].style.display='block';
                 };
         }
     }

2、jquery

 $(function(){
             $('#tab').find('input').click(function(){
                     $('#tab').find('input').attr('class','');
                     $('#tab').find('div').css('display','none');
                     $(this).attr('class','active');
                     $('#tab').find('div').eq($(this).index()).css('display','block');
                 });
         });

3、链式jquery

 $(function(){
                 $('#tab').find('input').click(function(){
                         $(this).attr('class','active').siblings().attr('class','').parent().find('div').eq($(this).index()).css('display','block').siblings().css('display','');
                     });
             });

html主体：

<div id='tab'>
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">第一个tab</div>
<div>第二个tab</div>
<div>第三个tab</div>
</div>