基于jquery的tab切换 js原理

221 阅读 0 评论 146 点赞

我是靠谱客的博主暴躁小蘑菇，这篇文章主要介绍基于jquery的tab切换 js原理，现在分享给大家，希望可以做个参考。

html代码:

复制代码代码如下:

 
<div class="details"> 
<ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul> 
<dl id="a1">11111111111111111111111111111111 
</dl> 
<dl id="a2" style="display:none"> 
22222222222222222222222222222222222 
</dl> 
<dl id="a3" style="display:none">3333333333333333333333333333333333333 
</dl> 
</div> 

js代码:

复制代码代码如下:

 
$(function(){ 
$(".tab>li").mouseover(function(){ 
$(".tab>li").removeClass("on"); 
$(this).addClass("on"); 
var target = $('#' + this.rel); 
if (target.size() > 0) { 
$('.details > dl').hide(); 
target.show(); 
} else { 
alert('There is no such container.'); 
} 
}); 
}); 

效果图:

打包下载地址