jquery實現tab選項卡轉場效果（懸停、下方橫線動畫位移），jquerytab

jquery實現tab選項卡轉場效果（懸停、下方橫線動畫位移），jquerytab

本文執行個體為大家分享了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);   } 　　 }       })}）

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。