jquery - 如何突出显示引用相同 URL 的导航菜单

Question

我有一个导航菜单，其中有两个元素引用相同的 URL。

<div id="LEFTmenu">
  <ul>
    <li><a href="app/link1">Page1</a></li>
    <li><a href="app/link2">Page2</a></li>
    <li><a href="app/link3">Page3</a></li>
    <li><a href="app/link2">Page4</a></li>
    <li><a href="app/link5">Page5</a></li>
 </ul>
</div>

这里 Page2 和 Page4 指向同一个 URL。

[更新]

当用户点击 Page2 或 Page4 以及请求转发到 link2 后，如何突出显示选定的链接/元素。所以我不能在点击事件中执行此操作并在该事件上使用 preventDefault。

它是一个 MVC 应用程序，因此请求转到一个 servlet( Controller )并呈现一个 JSP。所以 Page2 和 Page4 指向同一个 JSP 文件。

文件:

nav.jsp -- 导航菜单link2.jsp -- link2特有的内容

很抱歉没有提前提供这些细节。

Answer 1

单击时，您可以提取当前 anchor 标记的 href 属性并在菜单中搜索它。

$(function() {
  $('#LEFTmenu a').on('click', function(e) {
    var $this = $(this),
        $ul = $(this).parents('ul'),
        href = $this.attr('href');
    $ul.find('a[href="'+href+'"]').css('background', 'lime');

    e.preventDefault(); // do not go to link
  });
});

Working example on JS Bin