当用户选择并在悬停时更改背景颜色时，JQuery用图像突出显示菜单项

Question

这里是JQuery/Javascript新手。我创造了一个菜单。当用户在菜单中的某一项上盘旋时，我希望更改背景色。(易于使用CSS。)当用户实际选择某一项时，我希望在项目名称的顶部显示一个箭头(就像带有背景图像的悬停效果)，但与悬停效果不同的是，我希望箭头保持不变，直到用户选择菜单上的另一项。基本上，我正在尝试重新创建Zappos在这里所做的(，见左边的迷你浮动菜单)：http://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl%3A0。

我查看了许多关于突出显示所选菜单项的堆栈溢出问题和答案，但是，没有一个是我正在寻找的，而这正是Zappos浮动菜单所做的。

任何帮助都将不胜感激！

阿南子

Answer 1

看看我做了什么在这里的弹琴。

在zappos做类似的效果

$(document).ready(function() {

    $('ul li').hover(
        function() {
        if ( !$('div').hasClass('blue') ) {
            $(this).addClass('gray');
        }
        },
       function() {
           $(this).removeClass('gray');
       }
    );

    $('ul li').click( function() {
        $('ul li').removeClass('blue');
        $(this).addClass('blue');
    });
});

编辑:通过向css类添加带有箭头的背景，可以添加所需的箭头效果。取决于您希望箭头在悬停(灰色类)或单击(蓝色类)。

Answer 2

您可以使用css进行悬停效果。假设导航是带有"nav“类的无序列表，代码如下所示：

.nav li a:hover {
  background: #95ACC3;
}

至于单击效果，您需要使用jQuery向单击的任何列表项添加类。例如，下面的代码首先从所有列表项中删除类“active”(这确保一次只有一个项具有“活动”类)，然后它将“活动”类添加到单击的任何项中。

$('.nav li').click(function(){
  $('.nav li').removeClass('active');
  $(this).addClass('active');
});

下面是我正在讨论的一个工作示例：http://jsfiddle.net/8CMxG/