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;}
Box" id="switch"> 公司动态

$(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);
}
   }
})
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/39498.html

猜你在找的jQuery相关文章