由于某种原因，Javascript 代码仅影响下拉菜单链接

Question

编辑:如果可能的话，我也可以通过 CSS 来完成它。另请注意，a:active 不起作用，因为 a:active 仅在元素/链接处于事件状态时短暂更改它，直到单击导航栏中的另一个链接后才会更改它。

我正在尝试编写一个代码，在导航栏中，如果单击链接并且该链接链接到当前页面，则导航栏中的链接颜色应该不同(应该从白色更改为红色) )。到目前为止，这是我的 html。

<nav class="menuL">
<ul id="menu">
<li><a href="#!/page_about"><span></span>biography</a></li>
<li><a href="#!/page_portfolio" id="portmenu"><span></span>portfolio</a></li>
<ul id="submenu">
    <li class="subclass" id="first"><a href="#!/page_wine">Wine</a></li>
    <li class="subclass" id="second"><a href="#!/page_landscape">Landscape</a></li>
    <li class="subclass" id="third"><a href="#!/page_divers">Divers</a></li>
</ul>
</ul>
</nav>
<nav class="menuR">
<ul id="menu2">
<li><a href="#!/page_galleries"><span></span>galleries</a></li>
<li><a href="#!/page_contacts"><span></span>contact</a></li>
</ul>
</nav>

这是 JavaScript。

$(document).ready(function() {
      $('nav a').click(function() {
        $(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
        $(this).addClass('activeAnchor');
      });
    });

这是我与 Javascript 配合使用的 CSS。

a.activeAnchor {
  color:red;
}

正如标题所提到的，这只影响子菜单。当我将鼠标悬停在端口菜单(投资组合)上并且单击一个子菜单项时，我单击的子菜单链接将变为红色，如果我单击另一个子菜单项，它会发生变化，这样就可以了。但是，如果我单击非子菜单项(普通导航栏 li)，它不会改变。知道为什么它只影响子菜单吗？另外，如果我单击其中一个子菜单项，我希望突出显示 portmenu(投资组合)而不是子菜单项，我不太擅长 Javascript，所以如果有人可以帮助我解决这个问题，那就太好了!

Answer 1

这一行:

$(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');

...只会删除 'activeAnchor'来自同一个 <nav> 中的元素的类元素作为刚刚单击的项目，但您的顶级菜单分为两个 <nav>元素。您可以这样做:

$('.activeAnchor').removeClass('activeAnchor');

...从任何拥有事件类的元素中删除该事件类。

演示:http://jsfiddle.net/B8EPS/

或者只是将其限制为带有一些 <nav> 的内容页面上任意位置的元素:

$('nav .activeAnchor').removeClass('activeAnchor');

(或者任何其他组合实际上与您正在使用的 html 结构匹配。)