Проблема с меню JQuery CSS при активном элементе меню

Question

Я использую меню CSS на основе JQuery для своего сайта. Моя проблема, однако, заключается в том, что я нажимаю на один из пунктов меню. Я хочу, чтобы он оставался цетаиновым цветом, в моем случае борм наполовину оставил изображения.

Я получил свой код от http://snook.ca/archives/javascript/jquery-bg-image-animations/ Я использовал второй пример. Heres пример страницы: http://snook.ca/technical/jquery-bg/

Мой код выглядит следующим образом

<script type="text/javascript"> 
     $(function(){ 

     $('#nav a') 
      .css({backgroundPosition: "-20px 35px"}) 
      .mouseover(function(){ 
       $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800}) 
     }) 
      .mouseout(function(){ 
       $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:800, complete:function(){ 
        $(this).css({backgroundPosition: "-20px 35px"}) 
       }}) 


     }) 
     }); 
    </script> 

При наведении курсора меню меню изменится на другой цвет, это цвет, который я хочу меню, чтобы остаться, когда меню активна и была нажата.

Надеюсь, кто-то может мне помочь.

Я попытался как сказал ответ, и до сих пор ничего

Мой модифицированный код

<script type="text/javascript"> 
    $(function(){ 

    $('#nav a') 
     .css({backgroundPosition: "-20px 35px"}) 
     .mouseover(function(){ 
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800}) 
    }) 
     .mouseout(function(){ 
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:800, complete:function(){ 
       $(this).css({backgroundPosition: "-20px 35px"}) 
      }}) 


    }) 

    $('#nav a').click(function() { 
     $('#nav a:not(.selected'); 
     $('#nav a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }) 


    }); 



</script> 

Answer 1

Вы должны добавить класс CSS к Clicked ссылкам, а не в отличие от этого:

$('#nav a').click(function() { 
    $('#nav a').removeClass('selected'); 
    $(this).addClass('selected'); 
}) 

Тогда , вы можете иметь объявление CSS как:

.selected { background-position: -20px 35px; } 

И, наконец, функции mouseOver и mouseOut должны быть установлены на $('#nav a:not(.selected'), если вы не хотите, чтобы CSS был перезаписан.

[EDIT] Вот полный код:

$(function(){ 

    $('#nav a:not(.selected)') 
     .css({backgroundPosition: "-20px 35px"}) 
     .live('mouseover', function(){ 
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800}) 
     }) 
     .live('mouseout', function(){ 
      $(this).stop() 
       .animate({ 
        backgroundPosition:"(40px 35px)"}, 
        {duration:800, complete:function(){ 
         $(this).css({backgroundPosition: "-20px 35px"}); 
       }}) 
    }) 

    $('#nav a') 
     .live('click', function() { 
      $('#nav a').removeClass('selected'); 
      $(this).addClass('selected'); 
     }); 
}); 

Answer 2

С кодом Александра, чтобы добавить выбранный класс, когда элементы выбираются вы должны быть в состоянии изменить мышь из слушателя так:

.mouseout(function(){ 
    // cache $(this) rather than executing it multiple times 
    var $this = $(this); 
    if (!$this.is('.selected')) { 
     $this.stop().animate(
      { 
       backgroundPosition:"(40px 35px)" 
      }, 
      { 
       duration:800, 
       complete:function() 
       { 
        $this.css({backgroundPosition: "-20px 35px"}) 
       } 
      } 
    ) 
}) 

Надеюсь, это поможет!