Question

我有使用JQuery在mouseover和mouseout事件上设置BG位置的图像精灵。当我使用JQUERY设置活动状态BG位置时，它可以正常工作，直到我将光标移离活动“标签”，然后激活鼠标输出事件动画。

我想要的是mouseClick事件在活动选项卡上停止动画但仍允许动画效果在其他选项卡上工作，并且当单击另一个选项卡以将活动状态从当前选项卡移除到新的“有效”标签。

JQuery的

$(function(){

 /* This script changes main nav links hover state*/

$('.navigation a')
 .css( {backgroundPosition: "-1px -120px"} )
 .mouseover(function(){
 $(this).stop().animate({backgroundPosition:"(-1px -240px)"}, {duration:400})
      })


 .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(-1px -120px)"}, {duration:400, complete:function (){
    $(this).css({backgroundPosition: "-1px -120px"})

   }})


  })

});

$(document).ready(function(){
$("a").click(function(){ 
$(this).css({backgroundPosition: "-1px -235px"});                                    

}); 
});

HTML

<ul class="navigation">

<li><a href="#index" tabindex="10" title="Home" id="homeButton"></a></li>
<li><a href="#about" tabindex="20" title="About us"  id="aboutButton"></a></li>
<li><a href="#facilities" tabindex="30" title="Our facilities and opening Times"  id="facilitiesButton"></a></li>
<li><a href="#advice" tabindex="40" title="Advice and useful links" c id="adviceButton"></a></li>
<li><a href="#find" tabindex="50" title="How to find Us"  id="findButton"></a></li>
<li><a href="#contact" tabindex="60" title="Get in touch with us" id="contactButton"></a></li>

</ul>

You can see what I've got so far here

提前感谢您提供任何帮助

Answer 1

$("ul li").click(function(){
  $("ul li.active").removeClass('active');  
  $(this).stop().addClass('active');
})

JQUERY：在动画菜单选项卡上设置活动状态

1 个答案: