强大的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>