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