jquery-制作选项卡

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

 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>

 

 

标签: css, js, jquery