jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
更新时间:2017年05月05日 11:34:05 作者:Hailinlu
这篇文章主要介绍了jquery实现tab选项卡切换效果,实现悬停、下方横线动画位移,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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); } } }) })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
这篇文章主要介绍了easyUi 打开对话框后控件赋值,以及赋值后不显示的问题解决办法,解决方法非常简单,只需要将赋值语句修改下就好,下面小编给大家简单介绍下,需要的朋友参考下2017-01-01jQuery中的ready函数与window.onload谁先执行
这篇文章主要介绍了jquery中ready函数与window.onload函数的区别,别讲解了他们各自执行的时机,通俗易懂,需要的朋友可以参考下。2016-06-06seajs加载jquery时提示$ is not a function该怎么解决
这篇文章主要介绍了seajs加载jquery时提示$ is not a function该怎么解决的相关资料,需要的朋友可以参考下2015-10-10
最新评论