快捷導(dǎo)航

jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果（懸停、下方橫線動畫位移）

更新時間：2017年05月05日 11:34:05 作者：Hailinlu

這篇文章主要介紹了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果，實(shí)現(xiàn)懸停、下方橫線動畫位移，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換展示的具體代碼，供大家參考，具體內(nèi)容如下

同時實(shí)現(xiàn)懸停、下方橫線動畫位移：

代碼：

<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>公司動態(tài)</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);
   }
 　　 }      
 })
}）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery和js實(shí)現(xiàn)對div的隱藏和顯示方法
jquery和js分別可以實(shí)現(xiàn)對div的隱藏和顯示，方法也不一樣，jquery的show、show;js的hidden、visible
2014-09-09
JQuery?綁定select標(biāo)簽的onchange事件，彈出選擇的值，并實(shí)現(xiàn)跳轉(zhuǎn)、傳參
JQuery?綁定select標(biāo)簽的onchange事件，彈出選擇的值，并實(shí)現(xiàn)跳轉(zhuǎn)、傳參（selected的值和頁面其它元素的值）
2011-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery maxlength文本字?jǐn)?shù)限制插件
相信大家對twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時提示效果設(shè)計的非常人性化.
2010-04-04
高效的jQuery代碼編寫技巧總結(jié)
好的代碼會帶來速度的提升，快速渲染和響應(yīng)意味著更好的用戶體驗(yàn)。本文主要總結(jié)了如何高效的編寫jQuery代碼的技巧，對提升你的jQuery和javascript代碼具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
jquery動態(tài)添加元素事件失效問題解決方法
當(dāng)使用腳本動態(tài)添加元素xxx時，但事件失效，最后使用jquery中on方法解決腳本動態(tài)添加元素,需要的朋友可以參考下
2014-05-05
jQuery中用on綁定事件時需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時需注意的事項(xiàng)，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D雙柱狀圖效果,涉及jQuery使用插件FusionCharts結(jié)合xml數(shù)據(jù)繪制的3D雙柱狀圖的相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
解決jQuery ajax請求在IE6中莫名中斷的問題
本文主要介紹jQuery ajax請求在IE6中莫名中斷問題的解決方法，有需要的朋友可以參考一下。
2016-06-06