tab选项卡-jQuery

上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ，直接看代码：

/*布局*/

<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">1111</div>
<div>2222</div>
<div>3333</div>
</div>

/*原生js*/

window.onload=function(){

var div=document.getElementById(‘div1‘);
var ainput=div.getElementsByTagName(‘input‘);
var li=div.getElementsByTagName(‘div‘);
for(var i=0;i<ainput.length;i++){
ainput[i].index=i;
ainput[i].onclick=function(){
for(var i=0;i<ainput.length;i++){
ainput[i].className=‘‘;
li[i].style.display=‘none‘;
}
this.className=‘active‘;
li[this.index].style.display=‘block‘;
}
}
}

/*jQuery*/

$(function(){
$(‘#div1‘).find(‘input‘).click(function(){

$(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘)；

$(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘)；

$(this).attr(‘class‘,‘active‘)；

$(‘#div1‘).find(‘div‘).eq($(this).index()).css(‘display‘,‘block‘)；
})；
})；

jQuery实现选项卡的方法有好多种， 随着对jq库学习的深入 越来越感觉到jq真的很强大 ，希望可以走的越来越远；

tab选项卡-jQuery

原文：http://www.cnblogs.com/xueding/p/5313027.html