Rumah >hujung hadapan web >tutorial js >jquery实现tab选项卡切换效果

jquery实现tab选项卡切换效果

小云云
小云云asal
2018-01-12 13:10:001970semak imbas

本文主要介绍了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>
<p class="box" id="switch">
 <span class="current">新闻资讯</span>
  <span>公司动态</span>
 <p class="line"></p>
</p> 

$(function(){
 var $spans=$("#switch span");
 $spans.click(function(){
   $(this).addClass(&#39;current&#39;).siblings().removeClass(&#39;current&#39;);
  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){
    $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;0px&#39;},300);
   }else{
    $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;150px&#39;},300);
   }
  }    
 })
 $spans.mouseout(function(){
  var index=$spans.index(this);
  var cName=$(this).attr("class");
  if(cName!="current"){
   if(index==0){
   $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;150px&#39;},300);
   }else{
   $(&#39;.line&#39;).animate({&#39;left&#39;:&#39;0px&#39;},300);
   }
    }      
 })
})

相关推荐:

关于JavaScript插件Tab选项卡效果分享

利用纯CSS3实现tab选项卡切换示例

JavaScript实现通用tab选项卡

Atas ialah kandungan terperinci jquery实现tab选项卡切换效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn