Question

我有一个导航菜单，其中有两个项目指的是相同的网址。

<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＆amp;第4页指向相同的网址。

[更新]

当用户点击Page2或Page4时以及请求转发到link2后，如何突出显示所选链接/项目。所以我不能在click事件中执行此操作并对事件使用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

使用此：

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 3

如果要突出显示您单击的链接，上一个答案应该可以解决问题。但是，如果您只想突出显示具有特定href的锚点，只需检查它attr：

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

Answer 4

＆＃13;

$(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');
  });
});

＆＃13;

.highlight {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

根据您的浏览器支持（IE 9不支持classList），您甚至可以在条件和纯Javascript中更进一步。没有必要，并且不会产生巨大的性能差异，但我总是喜欢在没有jquery的情况下：

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

<强>更新

这是一个比上面更好，更有活力的选择。在这里，我们使用some()循环遍历所有链接，但所点击的链接。如果其中任何一个与当前点击的链接相匹配，那么它将返回true或false。然后，我们使用此值来确定是否将类添加到链接

＆＃13;

$(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');
  });
});

＆＃13;

.highlight {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

如何突出显示引用相同网址的导航菜单

4 个答案: