Javascript 当用户选择JQuery菜单项并在鼠标悬停时更改其背景色时，JQuery会使用图像高亮显示该菜单项

这里是JQuery/Javascript新手。我已经创建了一个菜单。当用户将鼠标悬停在菜单中的某个项目上时，我希望更改背景颜色。（使用CSS很容易。）当用户实际选择一个项目时，我希望在项目名称上方显示一个箭头（就像背景图像的悬停效果），但与悬停效果不同，我希望箭头保持不变，直到用户选择菜单上的另一个项目。基本上，我正在尝试重现Zappos在这里所做的工作（请参见鞋子左侧的迷你浮动菜单）：

我看了很多关于突出显示选定菜单项的问题和答案，但没有一个是我想要的，这正是Zappos浮动菜单的功能

任何帮助都将不胜感激

---

Ananzi

您可以使用css实现悬停效果。假设导航是一个无序列表，类为“nav”，代码如下所示：

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

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

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

下面是一个JSFIDLE，其中有一个我正在谈论的工作示例： 看看我做了什么

在捷步达康也有类似的效果

$(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类添加带有箭头的背景来添加所需的箭头效果。这取决于你想让箭头在悬停（灰色类）还是点击（蓝色类）

他们是用css类完成的，（自己检查一下）上的

。对！感谢您的回复！我查看了源代码并看到了CSS。他们是用嵌套类还是别的什么来做的？。实际上，我正在寻找一些关于如何编写此代码的明确帮助-无论是CSS还是CSS和JavaScript/JQUERY。谢谢这是很棒的特拉维斯，非常感谢你抽出时间！选择菜单项时，我希望出现箭头图像（如Zappos菜单中的箭头图像）。因此，当用户单击一个菜单项时，箭头图像将出现并保持，直到单击另一项。你能告诉我怎么做吗？你好，里卡多。这太棒了，谢谢！！您对li标记而不是标记执行JQuery函数有什么原因吗？这就是我现在设置它的方式-带标签。尽管根据我的研究，我认为这可能会导致JQuery代码出现问题，因为URL中有一个#（因为它们指向具有匹配ID的div）。我如何将蓝色正方形替换为箭头（图像）（如Zappos）？我看错了框。我的朋友向我展示了漂浮在左边的图库。我使用私人浏览进行了检查，它用箭头显示了您想要的框。代码几乎相同。只有css会改变。看看这个，这就是我想要的！非常感谢李嘉图！！只有几个问题…我想确保我理解代码。为什么要对li标记而不是标记执行JQuery函数？li标签的ID是做什么的？（我没有在JQuery或CSS中找到他们的参考资料。）再次感谢！！li上的ID用于标识已单击的li，以便我们可以在人们单击它时添加箭头。您还可以根据该id切换内容。您也可以尝试使用a，但您不需要它。根据li id切换内容，如果需要，使用jquery获取a href并执行操作。。你可以从我写的东西开始，做很多事情。啊，好的。谢谢你的解释！我想我明白了！！