jquery tab选项卡

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30519071

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/luhailin/p/6812072.html

本文介绍了一种使用CSS实现的悬停动画效果，当鼠标悬停在特定元素上时，下方横线会平滑移动到该元素下。通过jQuery实现了元素间的切换与动画的联动，适合用于导航栏等交互设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

悬停，下方横线动画位移

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