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

因此，我目前有一个功能，它根据我单击的导航栏菜单项高亮显示我的导航栏菜单项

我的问题是，我的导航栏中有一个按钮，当我点击它时，它会得到应用于它的

高亮显示
类

我不知道如何编写Javascript，以确保当我单击它时，它不会应用
突出显示
类

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











首先，您不需要在菜单中的每个项目上单击
事件。您可以（应该）在您的
单击
事件
，并使用事件的属性
target
查找已单击的项目

其次，要回答您的问题，要从上一个选定项目中删除
突出显示
类，您应该执行
document.querySelector（'.highlight'）.classList.remove（'highlight'）
，然后将该类添加到新的选定项中

代码可能是这样的

menuLinks.addEventListener（'click'，evt=>{
//删除以前选定的项目高亮显示类
document.querySelector（'.highlight'）.classList.remove（'highlight'）；
//添加突出显示类
evt.target.classList.add（'highlight'）；
});
首先，您不需要在菜单中的每个项目上单击
事件。您可以（应该）在您的
单击
事件
，并使用事件的属性
target
查找已单击的项目

其次，要回答您的问题，要从上一个选定项目中删除
突出显示
类，您应该执行
document.querySelector（'.highlight'）.classList.remove（'highlight'）
，然后将该类添加到新的选定项中

代码可能是这样的

menuLinks.addEventListener（'click'，evt=>{
//删除以前选定的项目高亮显示类
document.querySelector（'.highlight'）.classList.remove（'highlight'）；
//添加突出显示类
evt.target.classList.add（'highlight'）；
});
以下是完整的工作代码，可以解决您的所有问题。当您点击
logo
时，它会将突出显示的
class
添加到主页中，并将
检查
窗口长度是否大于768-您可以为logo单独设置一个事件
侦听器
，以确保我们只将class添加到主页中

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

另外，为了避免突出显示类添加到
signup
按钮，您只需使用
getAttribute（）
方法检查单击的li项
id
是否为
not
signup

// 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__菜单'）；
const logo=document.querySelector（“#navbar_uuulogo”）；
const activeMenu=e=>{
常量elem=document.querySelector（'.highlight'）；
//在此处向我的菜单项添加“突出显示”类
如果（window.innerWidth>768）{
如果（e.target.getAttribute（'id'）！='signup'）{
e、 target.classList.add（'highlight'）；
}
}
//单击li时从其他类中删除类
if（元素和窗口内部宽度<768 | |元素）{
elem.classList.remove（'highlight'）；
}
};
//点击li上的事件
menuLinks.addEventListener（'单击'，活动菜单）；
//徽标事件侦听器
logo.addEventListener（'click'，function（）{
如果（window.innerWidth>768）{
const homemmenu=document.querySelector（“#homePage”）；
homemmenu.classList.add（'highlight'）；
}
});
//关于调整大小
window.addEventListener（'resize'，函数（事件）{
const links=document.queryselectoral（'.navbar__链接'）；
links.forEach（函数（x）{
如果（窗内宽度<768）{
x、 classList.remove（'highlight'）；//remove highlught类
}
})
});
。突出显示{
背景：红色；
}










这里有完整的工作代码，可以解决您的所有问题。当您点击
logo
时，它会将突出显示的
class
添加到主页中，并将
检查
窗口长度是否大于768-您可以为logo单独设置一个事件
侦听器
，以确保我们只将class添加到主页中

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

另外，为了避免突出显示类添加到
signup
按钮，您只需使用
getAttribute（）
方法检查单击的li项
id
是否为
not
signup

// 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__菜单'）；
const logo=document.querySelector（“#navbar_uuulogo”）；
const activeMenu=e=>{
常量elem=document.querySelector（'.highlight'）；
//在此处向我的菜单项添加“突出显示”类
如果（window.innerWidth>768）{
如果（e.target.getAttribute（'id'）！='signup'）{
e、 target.classList.add（'highlight'）；
}
}
//单击li时从其他类中删除类
if（元素和窗口内部宽度<768 | |元素）{
elem.classList.remove（'highlight'）；
}
};
//点击li上的事件
menuLinks.addEventListener（'单击'，活动菜单）；
//徽标事件侦听器
logo.addEventListener（'click'，function（）{
如果（window.innerWidth>768）{
const homemmenu=document.querySelector（“#homePage”）；
homemmenu.classList.add（'highlight'）；
}
});
//关于调整大小
window.addEventListener（'resize'，函数（事件）{
const links=document.queryselectoral（'.navbar__链接'）；
links.forEach