即使没有人为你鼓掌，也要优雅的谢幕，感谢自己的认真付出。我们未来都是巨星，别人信不信无所谓，我们自己必须坚信！
本文实例为大家分享了jquery实现tab选项卡切换展示的具体代码，供大家参考，具体内容如下
同时实现悬停、下方横线动画位移：
代码：
<sytle>
*{margin:0;padding:0; }
.box{position:relative;font-size:0;}
.box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-size:16px;}
.line{position:absolute;width:150px;height:3px;background:#059;left:0;bottom:0;}
</style>
<div class="box" id="switch">
<span class="current">新闻资讯</span>
<span>公司动态</span>
<div class="line"></div>
</div>
$(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);
}
}
})
}）
本文jquery实现tab选项卡切换效果（悬停、下方横线动画位移）到此结束。虽然过去不能改变，未来能够。小编再次感谢大家对我们的支持！