jquery实现tab选项卡切换效果（悬停、下方横线动画位移）

这篇文章主要介绍了jquery实现tab选项卡切换效果，实现悬停、下方横线动画位移，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现tab选项卡切换展示的具体代码，供大家参考，具体内容如下

同时实现悬停、下方横线动画位移：

代码：

  　　*{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;}  新闻资讯公司动态 $(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选项卡切换效果（悬停、下方横线动画位移）的详细内容，更多请关注本站其它相关文章！