编辑

Question

第一篇文章顺便说一句。

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

但是，当有人按下“项目”链接时，我可以使用哪种JavaScript代码制作该链接，以便当页面进入该部分时，它会更改导航栏中的颜色样式？我有一个名为current的样式类，该类具有当该部分处于焦点或单击状态时要应用的样式。

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

编辑

这是我的导航栏的HTML代码，也是打开和关闭它的Javascript，当我不确定要在页面的特定部分更改类时，我不确定下一步该怎么做。

HTML导航代码：

-c

JavaScript：

<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>

亲切的问候，塔拉尔德

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是否使生活更轻松。希望这将有助于实现您自己的版本。

更改导航栏上的“当前”类

编辑

1 个答案: