Question

因此，我目前具有此功能，可根据我单击的内容来突出显示导航栏菜单项。

我的问题是，我的导航栏内有一个按钮，当我单击它时，它正在应用highlight类。

我不确定如何编写Javascript以确保单击时不会应用highlight类。

这是JS

      const menu = document.querySelector('#mobile-menu');
      const menuLinks = document.querySelector('.navbar__menu');

      const activeMenu = e => {
        const elems = document.querySelector('.highlight');
        const button = document.querySelector('.button');

        if (elems) {
          elems.classList.remove('highlight');
        }

        e.target.className = 'navbar__links highlight';
      };

      menuLinks.addEventListener('click', activeMenu);

这是导航栏的HTML

    <ul class="navbar__menu">
      <li class="navbar__item">
        <a href="#home" class="navbar__links" id="homePage">Home</a>
      </li>
      <li class="navbar__item">
        <a href="#about" class="navbar__links" id="about-us">About 
     Us</a>
      </li>
      <li class="navbar__item">
        <a href="#services" class="navbar__links" 
    id="service">Services</a>
      </li>
      <li class="navbar__btn">
        <a href="#sign-up" class=" button" id="signup">Sign Up</a>
      </li>
    </ul>

Answer 1

首先，您不需要侦听菜单中每个项目上的git checkout事件。您可以（应该）在click中监听click事件，并使用该事件的属性<ul class="navbar__menu">来找出已单击了哪个项目。

第二，要回答您的问题，要从先前选择的项目中删除target类，您应该执行highlight，然后将该类添加到新的选定项目中。

代码可能是这样的

document.querySelector('.highlight').classList.remove('highlight');

Answer 2

这里是完整的工作代码，可以解决您的所有问题。当您点击logo时，它将在页面上添加高亮显示class，并且check的窗口长度> 768-您单独为徽标添加了一个事件listener，以确保我们仅添加转到首页。

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});

此外，为避免突出显示类别添加到signup按钮，您可以使用id方法简单地检查所单击的li项目not是否是getAttribute()注册。

// adds 'highlight' class to my menu item here - except the button
if (window.innerWidth > 768) {
  if (e.target.getAttribute('id') != 'signup') {
    e.target.classList.add('highlight');
  }
}

完整的工作演示：

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
const logo = document.querySelector('#navbar__logo');

const activeMenu = e => {
  const elem = document.querySelector('.highlight');

  // adds 'highlight' class to my menu item here
  if (window.innerWidth > 768) {
    if (e.target.getAttribute('id') != 'signup') {
      e.target.classList.add('highlight');
    }
  }

  //Remove class from others when click on li
  if (elem && window.innerWidth < 768 || elem) {
    elem.classList.remove('highlight');
  }
};

//Click event on li
menuLinks.addEventListener('click', activeMenu);

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});


//on resize
window.addEventListener('resize', function(event) {
  const links = document.querySelectorAll('.navbar__links');
  links.forEach(function(x) {
    if (window.innerWidth < 768) {
      x.classList.remove('highlight'); //remove highlught class
    }
  })
});

.highlight {
  background: red;
}

<a href="#home" id="navbar__logo">COLOR</a>
<div class="navbar__toggle" id="mobile-menu">
  <span class="bar"></span> <span class="bar"></span>
  <span class="bar"></span>
</div>

<ul class="navbar__menu">
  <li class="navbar__item">
    <a href="#home" class="navbar__links" id="homePage">Home</a>
  </li>
  <li class="navbar__item">
    <a href="#about" class="navbar__links" id="about-us">About
      Us</a>
  </li>
  <li class="navbar__item">
    <a href="#services" class="navbar__links" id="service">Services</a>
  </li>
  <li class="navbar__btn">
    <a href="#sign-up" class="button" id="signup">Sign Up</a>
  </li>
</ul>

Javascript仅在特定元素上切换活动类？

2 个答案: