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

巴特西

jquery-制作选项卡

强大的jquery-制作选项卡

最新文章

热门文章