Невозможно удалить класс после использования класса переключения с jQuery

Question

У меня три навигации на одной странице, и я пытаюсь показать активные ссылки для каждой навигации. По какой-то причине третья навигация не работает правильно. Например, если вы нажмете «глава 2» или «глава 3» или «глава 4», «глава 1» останется активной. Я не знаю, так ли это, потому что "Chapter 1" и "sublink4" из средней навигации имеют одинаковый URL. Я попытался удалить активный класс третьего nav, но он не работает. К сожалению, перехват не работает, как на моем компьютере. Я использовал 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

Используйте preventDefault, чтобы обработчик событий по умолчанию открывал новую ссылку. window.open() позволит вам открывать ссылки в новых вкладках.

Примечание: этот код не будет работать в песочницах.

Дайте мне знать, если я что-то упустил?

var links = document.querySelectorAll('a');
links.forEach((node) => {
  node.addEventListener("click", (evt) => {
    evt.stopPropagation();
    evt.preventDefault();
    evt.target.classList.add('active');
    window.open(evt.target.href);
  });
});

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 2

-> заменить $ на j Запрос

-> Либо заменить последнюю версию jquery