本文实例为大家分享了jquery实现tab选项卡切换展示的具体代码,供大家参考,具体内容如下
同时实现悬停、下方横线动画位移:
代码:
$(function(){
var $spans=$("#switch span");
$spans.click(function(){
$(this).addClass('current').siblings().removeClass('current');
var index=$spans.index(this);
//$("#content .detail").eq(index).show().siblings().hide();
//$("#fr .bar").eq(index).show().siblings().hide();
})
$spans.mouSEOver(function(){
var index=$spans.index(this);
var cName=$(this).attr("class");
if(cName!="current"){
if(index==0){
$('.line').animate({'left':'0px'},300);
}else{
$('.line').animate({'left':'150px'},300);
}
}
})
$spans.mouSEOut(function(){
var index=$spans.index(this);
var cName=$(this).attr("class");
if(cName!="current"){
if(index==0){
$('.line').animate({'left':'150px'},300);
}else{
$('.line').animate({'left':'0px'},300);
}
}
})
})