如何突出显示引用相同 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（控制器）并呈现一个 JSP。所以 Page2 和 Page4 指向同一个 JSP 文件。

文件：

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

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

Answer 1

点击后，您可以提取当前锚标记的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

Answer 2

如果您想突出显示您单击的链接，前面的答案应该可以解决问题。但是，如果您只想使用特定的 href 突出显示 Anchor，只需检查它是否为 attr：

$('#LEFTmenu a').click(function(e){
  e.preventDefault();
  if ($(this).attr("href") == "app/link2") {
    $(this).css("color", "yellow");
  }
});

Answer 3

使用这个：

HTML

<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>

JS

我使用e.preventDefault(); 供您查看更改。

$('a').click(function(e){
  $('a').css('background-color','');
  e.preventDefault();
});
$('a[href="app/link2"]').click(function(e){
     $('a').css('background-color','');
    $(this).css('background-color','yellow');
    e.preventDefault();
});

这是一个有效的solution

Answer 4

$(function() {
  var $menuLinks = $('#LEFTmenu a');

  $menuLinks.on('click', function(e) {
     e.preventDefault();

     if ($(this).attr('href') === 'app/link2') {
       $(this).addClass('highlight');
     }
    
     $menuLinks.not(this).removeClass('highlight');
  });
});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

您甚至可以在条件中更进一步，使用纯 Javascript，具体取决于您的浏览器支持（IE 9 不支持 classList）。没有必要，也不会产生巨大的性能差异，但我总是喜欢尽可能不使用 jquery：

if (this.getAttribute('href') === 'app/link2') {
  this.classList.add('highlight');
}

更新：

这是一种比上述更好、更动态的替代方案。在这里，我们遍历所有链接除了使用some() 被点击的链接。如果其中任何一个与当前单击的链接匹配，那么它将返回true 或false。然后我们使用这个值来确定我们是否将类添加到链接中

$(function() {
  var $menuLinks = $('#LEFTmenu a');

  $menuLinks.on('click', function(e) {
    e.preventDefault();
    
    var that = this;
  
    var linkHasDuplicate = [].some.call($menuLinks.not(this), function(elem) {
      return elem.getAttribute('href') === that.getAttribute('href');
    });
    
    if (linkHasDuplicate) {
      $(this).addClass('highlight');
    }
    
    $menuLinks.not(this).removeClass('highlight');
  });
});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>