菜单项处于事件状态时出现 JQuery CSS 菜单问题

Question

我正在为我的网站使用基于 JQuery 的 CSS 菜单。但是，我的问题是，如果我单击菜单项中的一项。我希望它保持某种颜色，在我的例子中是图像的一半颜色。

我的代码来自 http://snook.ca/archives/javascript/jquery-bg-image-animations/我用了第二个例子。这是示例页面: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 类，与此类似:

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

然后，你可以有一个像这样的 CSS 声明:

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

最后，mouseOver 和 mouseOut 函数应该设置为 $('#nav a:not(.selected') , 如果您不想覆盖 CSS。

[编辑]完整代码如下:

$(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');
         });
});