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

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

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

代码：

sytle * { margin:0划水：0;}.box { position : relative font-size :0；}.box span { display : inline-block；宽度宽度：150像素高度：40 px线高：40 px文本对齐：居中；背景技术# eee font-size :16 px；}.行{ position:absolute绝对值宽度宽度：150像素宽度：3像素背景技术： # 059;左转：0底部：0;}/style div class=' box ' id=' switch ' span class=' current '新闻资讯/span跨度公司动态/span div class=' line '/div/div $(function(){ var $ spans=$(' # switch span ')；$spans.click(function(){ $(this)).addClass('current ').兄弟姐妹()。removeClass(“”当前');var索引=$ spans。索引(这个)；//$('#content .细节')。eq(指数)。显示()。兄弟姐妹()。hide()；//$('#fr .条')。eq(指数)。显示()。兄弟姐妹()。hide()；})$ spans。将鼠标放在(function(){ var index=$ spans)上。索引(这个)；var cName=$(this).attr(' class ')；if(cName！='current'){ if(index==0){ $(' .行')。动画({'left':'0px'}，300)；}else{ $(' .行')。动画({'left':'150px'}，300)；} } }) $spans.mouseout(函数(){ var index=$ spans。索引(这个)；var cName=$(this).attr(' class ')；if(cName！='current'){ if(index==0){ $(' .行')。动画({'left':'150px'}，300)；}else{ $(' .行')。动画({'left':'0px'}，300)；} } })})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。