0

编辑：如果可能的话，我也可以通过 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;
}

正如标题所提到的，这只影响子菜单。当我将鼠标悬停在 portmenu（投资组合）上时，如果我单击一个子菜单项，那么我单击的子菜单链接将变为红色，如果我单击另一个子菜单项，它就会更改，因此可以正常工作。但是，如果我单击非子菜单项（普通导航栏 li），它不会改变。关于为什么它只影响子菜单的任何想法？另外，如果我单击其中一个子菜单项，我希望突出显示 portmenu（投资组合）而不是子菜单项，我在 Javascript 方面不太擅长，所以如果有人可以帮助我解决这个问题，那就太好了！

4

1 回答 1

2

这一行：

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

...只会从与刚刚单击的项目'activeAnchor'相同的元素内的元素中删除该类<nav>，但您的顶级菜单分为两个<nav>元素。你可以这样做：

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

...从任何拥有它的元素中删除活动类。

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

或者只是将其限制为<nav>页面上任何位置具有某些元素的元素：

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

（或任何其他组合实际上与您正在使用的 html 结构相匹配。）

于 2013-07-13T08:40:15.473 回答