强大的jquery-制作选项卡
最近在学习jquery，特地把今天写的一个选项卡源码贴出来。只是做只是梳理，大神们请不要吐槽，如果有更好的方法，欢迎指点。谢谢。
css
<style>
#tab div{ 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
1 window.onload=function(){
2 var oDiv=document.getElementById('tab');
3 var oInput=oDiv.getElementsByTagName('input');
4 var Childdiv=oDiv.getElementsByTagName('div');
5 //debugger;
6 for(var i=0;i<oInput.length;i++)
7 {
8 oInput[i].index=i;
9 oInput[i].onclick =function(){
10 for(var i=0;i<oInput.length;i++){
11 oInput[i].className='';
12 Childdiv[i].style.display='none';
13 }
14 this.className='active';
15 Childdiv[this.index].style.display='block';
16 };
17 }
18 }
2、jquery
1 $(function(){
2 $('#tab').find('input').click(function(){
3 $('#tab').find('input').attr('class','');
4 $('#tab').find('div').css('display','none');
5 $(this).attr('class','active');
6 $('#tab').find('div').eq($(this).index()).css('display','block');
7 });
8 });
3、链式jquery
1 $(function(){
2 $('#tab').find('input').click(function(){
3 $(this).attr('class','active').siblings().attr('class','').parent().find('div').eq($(this).index()).css('display','block').siblings().css('display','');
4 });
5 });
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>