首页 > Web开发 > 详细

tab选项卡-jQuery

时间:2016-03-23 22:01:00      阅读:195      评论:0      收藏:0      [点我收藏+]

上次用原生的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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!