jquery实现tab选项卡切换效果(悬停、下方横线动

编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery实现tab选项卡切换效果,实现悬停、下方横线动画位移,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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);
   }
    }      
 })
})

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板