Question

我正在为我的网站使用基于JQuery的css菜单。但问题是，如果我点击菜单项中的一个。我希望它保持一种cetain颜色，在我的情况下，borrom一半的图像。

我从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; }

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

[编辑] 这是完整的代码：

$(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

使用Alexander的代码在选择项目时添加选定的类，您应该能够像这样修改鼠标输出监听器：

.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"})
                }
            }
    )
})

希望它有所帮助！

菜单项处于活动状态时的JQuery CSS菜单问题

2 个答案: