javascript - 在 jQuery 中使用切换类后无法删除类

Question

我在一个页面中有三个导航，我试图显示每个导航的事件链接。由于某种原因，第三个导航无法正常工作。例如，如果您单击“第 2 章”、“第 3 章”或“第 4 章”，“第 1 章”将保持事件状态。我不知道是否是因为中间导航中的“Chapter 1”和“sublink4”具有相同的网址。我尝试删除第三个导航的事件类，但它不起作用。不幸的是，截图功能无法像在我的计算机上那样工作。我只在代码片段上使用了 target="_blank"，而不仅仅是在我的本地计算机上，因为您无法在不重新启动代码片段的情况下单击代码片段上的链接。谢谢

$(window).on('load', function () {
    $('body').setActiveMenuItem();
    $('body').setActiveMenuItem2();
    $('body').setActiveMenuItem3();
});

$(document).ready(function () {

    //first nav
    $.fn.setActiveMenuItem2 = function () {

        $.each($('.nav1').find('li'), function () {
            $(this).toggleClass('active',
                window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
        });

    }

    //middle nav
    $.fn.setActiveMenuItem3 = function () {

        $.each($('.nav3').find('li'), function () {
            $(this).toggleClass('active3',
                window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
        });

    }

    //third nav 
    $.fn.setActiveMenuItem = function () {

        $.each($('.nav2').find('li'), function () {

            $(this).removeClass('active2');

            $(this).toggleClass('active2',
                window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
        });
    }
});

li.active {
    background-color: red;
}
li.active2 {
    background-color: blue;
}
li.active {
    background-color: yellow;
}

.nav1 ul, .nav3 ul {
    display: flex;
    justify-content: space-between;
}
nav {
    margin-bottom: 50px;
}
.wrapper {
    width: 400px;
    margin: auto;
}
li {
    list-style: none;
    background-color: aliceblue;
    padding: 10px;
}
li a {
    padding: 10px;
}
li a:hover {
    color: red;
    background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
      <nav class="nav1">
          <ul>
             <li>  <a href="/link-1" target="_blank">Link 1</a>  </li>
             <li><a href="/link-2" target="_blank" >Link 2</a> </li>
             <li><a href="/link-3" target="_blank">Link 3</a> </li>
             <li><a href="/link-4" target="_blank">Link 4</a> </li>
          </ul>
        </nav>

        <nav class="nav3">
          <ul>
              <li><a href="/link-1/sublink-1" target="_blank">Subink 1</a></li>
              <li><a href="/link-2/sublink-2" target="_blank">Subink 2</a></li>
              <li><a href="/link-2/sublink-3" target="_blank">Subink 3</a></li>
          </ul>
        </nav>

        <nav class="nav2">
          <ul>
              <li><a href="/link-1/sublink-1/chapter-1" target="_blank">Chapter 1</a></li>
              <li><a href="/link-1/sublink-1/chapter-2" target="_blank">Chapter 2</a></li>
              <li><a href="/link-1/sublink-1/chapter-3" target="_blank">Chapter 3</a></li>
          </ul>
        </nav>
  </div>

Answer 1

-> 将 $ 替换为 j Query

->替换最新的jquery