0

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

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

任何帮助将不胜感激！

阿南齐

4

2 回答 2

1

看看我在 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 类来添加所需的箭头效果。取决于您是否希望箭头悬停（灰色类）或单击（蓝色类）

于 2013-09-22T03:35:57.233 回答
0

您可以使用 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/

于 2013-09-22T03:32:23.690 回答