javascript - 在导航栏上更改 'current' 类

Question

顺便说一句。

所以我正在创建一个投资组合页面。它现在只是一个页面，向下滚动时有多个部分。我有一个可以切换的导航栏，当您单击其中一个“部分”时，您会向下滚动到它。

但是，当有人按下“元素”链接时，我可以使用什么 javascript 代码来制作它，以便当页面到达该部分时，它会更改导航栏中的颜色样式？我有一个名为 current 的样式类，它具有我想要在该部分处于焦点或单击时应用的样式。

我希望这个问题是可以理解的。先感谢您。 (P.S. 我是初学者)

编辑

这是我的导航栏 HTML 代码，还有打开和关闭它的 Javascript，当涉及到在页面的特定部分更改类时，我不确定下一步该去哪里。

HTML 导航代码:

<header>
  <div class="menu-btn noSelect">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>

  <nav class="menu noSelect">
    <div class="menu-branding"></div>
    <ul class="menu-nav">
      <li class="nav-item current">
        <a href="#home" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#work" class="nav-link">My Work</a>
      </li>
      <li class="nav-item">
        <a href="#about" class="nav-link">About Me</a>
      </li>
      <li class="nav-item">
        <a href="#contact" class="nav-link">Contact</a>
      </li>
    </ul>
  </nav>
</header>

JavaScript:

// Select DOM Items
const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".menu");
const menuNav = document.querySelector(".menu-nav");
const menuBranding = document.querySelector(".menu-branding");
const navItem = document.querySelectorAll(".nav-item");

// Set Initial state of the menu
let showMenu = false;

menuBtn.addEventListener("click", toggleMenu);

function toggleMenu() {
  // Opens the navigation bar
  if (!showMenu) { 
    menuBtn.classList.add("close");
    menu.classList.add("show");
    menuNav.classList.add("show");
    menuBranding.classList.add("show");
    navItem.forEach(item => item.classList.add("show"));

    // Set Menu state to true
    showMenu = true;
  }
  // Closes the navigation bar 
  else { 
    menuBtn.classList.remove("close");
    menu.classList.remove("show");
    menuNav.classList.remove("show");
    menuBranding.classList.remove("show");
    navItem.forEach(item => item.classList.remove("show"));

    // Set Menu state to false 
    showMenu = false;
  }
}

亲切的问候，塔拉尔德

Answer 1

这不是太棘手，我很确定这是一个以前曾被问过和回答过的问题，但让我试着为您指明正确的方向。

你没有提供任何代码，但我假设你有一个非常标准的导航栏，它可能是一个 ul 并且它包含一些将是 li 元素。它可能看起来像这样:

<ul class="navigation">
  <li class="navigation__item">Nav item</li>
  <li class="navigation__item">Nav item</li>
  <li class="navigation__item">Nav item</li>
  <li class="navigation__item">Nav item</li>
</ul>

而且，假设您已经在其上添加了一些快速和基本的样式，以便它水平输出元素，悬停时显示指针图标，并具有悬停状态，以便各个导航元素在悬停时更改背景颜色。您还提到您已经准备好了一个 current 类，所以我也把它放在那里:

.navigation {
  background: #ccc;
}
.navigation__item {
  display: inline-block;
  padding: 1em;
  cursor: pointer;
}
.navigation__item:hover {
  background: #ddd;
}
.navigation__item.current {
  background: #eee;
}

您似乎在询问如何使用 JS 将“当前”类应用于导航项，无论何时单击它们。我会设置事件监听器来监视元素，然后当单击一个时触发一些应用 current 类的脚本，并从中删除任何现有的 current 类其他元素。这可能看起来有点像这样:

const navItems = document.querySelectorAll('.navigation__item');

for (let i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener("click", function() {
    Array.from(navItems, navItem => navItem.classList.remove('current'));
    navItems[i].classList.add('current');
  });
}

You can see all of this working together如果它让生活更轻松。希望这有助于实现您自己的版本。