利用jquery怎么實現一個tab選項卡切換效果

利用jquery怎么實現一個tab選項卡切換效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

代碼：

<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);
   }
 　　 }      
 })
}）

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。