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

【问题标题】：JQUERY: Setting Active state on animated menu tabsJQUERY：在动画菜单选项卡上设置活动状态
【发布时间】：2010-04-09 17:19:37
【问题描述】：

我有使用 JQuery 在 mouseover 和 mouseout 事件上设置 BG 位置的图像精灵。当我使用 JQUERY 设置活动状态 BG 位置时，它可以正常工作，直到我将光标从活动“选项卡”移开，然后触发 mouseout 事件动画。

我想要的是 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

提前感谢您的帮助

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

【讨论】：

嗨 Pickle 感谢您的回复，不幸的是我已经尝试过该解决方案，但似乎因为我已经在 Jquery 中明确设置了 css 背景位置，它似乎覆盖了我拥有的“活动”css 类鼠标移开后立即设置。