在没有 Jquery 的情况下更改活动标签

Question

我找过类似的帖子，但它们似乎都求助于 Jquery，现在大多数情况下这被认为是过时的。

我的问题是：如何在单击时将活动的 class（当前在我的 "Projects" 标记标签上更改为兄弟姐妹？

我真的在尝试仅使用 Vanilla Javascript 并希望使用 .forEach 方法来实现结果，以使其更具功能性。

很抱歉暂时没有提供任何JS，看来我真的在努力学习基础知识。

<nav id="sidebar">
        <div class="toggle-btn" onclick="toggleSidebar()">
            <i class="fas fa-angle-double-right fa-2x"></i>
        </div>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link active">PROJECTS</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">CREATION PROCESS</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">BEFORE AND AFTER</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">ABOUT THE STUDIO</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">CONTACT</a>
            </li>
        </ul>
    </nav>

编辑：感谢第一个回复，我设法找到了一种干净而现代的方式来重构它以符合我的口味：

const tabs = document.querySelectorAll('.nav-link');

tabs.forEach(tab => tab.addEventListener('click', toggleActiveTab));

function toggleActiveTab(e) {
tabs.forEach(tab => {
    tab.classList.remove('active');
});
e.currentTarget.classList.toggle('active');
}

Answer 1

给你一个解决方案

var items = document.getElementsByClassName('nav-link');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', printDetails);
}

function printDetails(e) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].classList.contains("active")) {
      items[i].classList.toggle("active")
    }
  }
  this.classList.add("active");
}

.active {
  background: #ddd;
}

<nav id="sidebar">
  <div class="toggle-btn" onclick="toggleSidebar()">
      <i class="fas fa-angle-double-right fa-2x"></i>
  </div>
  <ul class="navbar-nav">
      <li class="nav-item">
          <a href="#" class="nav-link active">PROJECTS</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">CREATION PROCESS</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">BEFORE AND AFTER</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">ABOUT THE STUDIO</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">CONTACT</a>
      </li>
  </ul>
</nav>

如果无法将 onClick 事件添加到 HTML 代码，请为每个 nav-link 添加一个事件侦听器。

然后在点击方法中检查每个 nav-link 元素中的活动 class，如果活动 class 存在则切换它。

然后将活动 class 添加到单击的选项卡。

在没有 Jquery 的情况下更改活动标签

Changing active tab without Jquery

javascript

tabs

functional-programming

navbar