Question

JQuery / Javascript新手在这里。我创建了一个菜单。当用户将鼠标悬停在菜单中的某个项目上时，我希望背景颜色发生变化。（使用CSS很容易。）当用户实际选择一个项目时，我想在项目名称的顶部显示一个箭头（就像带有背景图像的悬停效果）但是，与悬停效果不同，我希望箭头保持不变直到用户选择菜单上的另一个项目。基本上，我正在尝试重新创建Zappos在这里所做的事情（查看鞋子左侧的迷你浮动菜单）：http://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl%3A0。

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

非常感谢任何帮助！

anaanzi

Answer 1

看看我做了什么here in jsfiddle。

在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将类添加到单击的任何列表项。例如，下面的代码首先从所有列表项中删除“活动”类（这确保一次只有一个项具有“活动”类），然后将“活动”类添加到单击的任何项目中。

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

这是一个jsfiddle，其中包含我正在谈论的工作示例： http://jsfiddle.net/8CMxG/

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

2 个答案: