jquery - 使菜单按钮突出显示

Question

我正在使用此示例http://jsfiddle.net/mekwall/up4nu/使我的菜单链接在用户向下滚动时突出显示。问题是示例突出显示“li”标签，但我只想突出显示“a”标签。所以我尝试这样做：

if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .removeClass("active")
             .end().filter("[href=#"+id+"]").addClass("active");
       } 

我从原始代码中删除了 parent() ，但这仍然没有达到我想要的效果。我对 jQuery 还不是很好，所以我不确定要添加/删除什么，所以只有“a”标签突出显示而不是“li”标签

Answer 1

这是一个突出显示a元素而不是li元素的工作小提琴：Fiddle。

我所做的是

• 更改了 HTML，因此它是第一个a具有类活动的元素，而不是li默认情况下的第一个元素：

  <a class="active" href="#">Top</a>

• 更改了 CSS，因此成为规则#top-menu li.active a（
  #top-menu li a.active因此它们应用于a元素）。

• 更改了 JavaScript 以处理所有这些：

    menuItems
        .removeClass("active")
        .filter("[href=#"+id+"]").addClass("active");
  

Answer 2

您在 JSFiddle 上的结果。

.parent()（第 42-43 行）有一个错误。

我还调整了 HTML 标记以对应：

<li>
    <a href="#" class="active">Top</a>
</li>

和 CSS：

//#top-menu li.active a {
#top-menu li a.active {