javascript - 使用带有 jQ​​uery 的切换类后无法删除类

Question

我在一页中有三个导航，我试图显示每个导航的活动链接。出于某种原因，第三个导航无法正常工作。例如，如果您单击“第 2 章”或“第 3 章”或“第 4 章”，“第 1 章”将保持活动状态。我不知道是不是因为中间导航中的“Chapter 1”和“sublink4”有相同的 url。我尝试删除第三个导航的活动类，但它不起作用。不幸的是，剪辑无法像在我的计算机上那样工作。我只在片段上使用了 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>

标签： javascriptjqueryurlnavigation

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>