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