时间戳

首页 > 解决方案 > 更改导航栏上的“当前”类

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

问题描述

顺便说一句，第一篇文章。

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

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

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

编辑

这是我用于导航栏的 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;
  }
}

亲切的问候，塔拉尔德

标签： javascripthtmlcss

解决方案

这不是太棘手，我很确定这是一个在某些时候被问过并回答过的问题，但让我试着为你指出正确的方向。

您没有提供任何代码，但我假设您有一个非常标准的导航栏，它可能是 aul并且它包含一些将成为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');
  });
}

如果它使生活更轻松，您可以看到所有这些协同工作。希望这应该有助于实现您自己的版本。

推荐阅读