javascript - 使用 Jquery 单击菜单链接时添加事件类

Question

我有 HTML

<div id="top" class="shadow">
  <ul class="gprc"> 
    <li><a href="http://www.domain.com/">Home</a></li> 
    <li><a href="http://www.domain.com/link1/">Text1</a></li> 
    <li><a href="http://www.domain.com/link2/">Text2</a></li> 
    <li><a href="http://www.domain.com/link3/">Text3</a></li> 
    <li><a href="http://www.domain.com/link4">Text4</a></li> 
  </ul> 
</div>

和 JQUERY

$(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });    
});

问题是，当我单击主页链接时，所有选项卡都处于事件状态并且不明白为什么。我需要它作为第一个链接才能获得任何事件类(class)。

Answer 1

我也在寻找这个解决方案，我已经测试了你的代码。在第一种方法中，所有链接都突出显示，当我单击其他链接时，它工作正常。问题出在主页上，因为所有链接都突出显示，因为加载页面时“没有收到任何事件”，理论上，如果您发送命令或单击每个链接，代码将起作用。为了阻止这种行为，我在上面的答案之一中找到了这段代码，添加这段代码并将“.sibling()”更改为“.previousSibling()”

$(this).parent().sibling().find('a').removeClass('active');

".sibling()"将在您的链接末尾突出显示，将其更改为".previousSibling()"因此它将转到第一个 (Li)

$(this).parent().previoussibling().find('a').removeClass('active');

你的代码将是这样的:

    $(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
            $(this).parent().previoussibling().find('a').removeClass('active');
        }
    });    
});