Javascript Remove Class for Specific Sc​​reen Size

Question

所以我写了一个函数，highlight每当我点击一个特定的菜单项时添加一个类，highlight如果我点击另一个菜单项则删除该类我的问题是，当我将屏幕缩小到移动视图时，该类highlight仍然适用，我不知道如何防止它出现？我使用了 window.innerWidth 但当我缩小屏幕时它似乎不起作用      const menu = document.querySelector('#mobile-menu');      const menuLinks = document.querySelector('.navbar__menu');      const activeMenu = e => {        const elem = document.querySelector('.highlight');         // adds 'highlight' class to my menu item here        if (window.innerWidth > 768) {          e.target.className = 'navbar__links highlight';        }                  // it doesn't remove the class 'highlight' when I shrink my screen        // this only removes the 'highlight' class if I click on a different menu item        if (elem || window.innerWidth < 768) {          elem.classList.remove('highlight');        }      };      menuLinks.addEventListener('click', activeMenu); // Tried to add resize event, but this didn't work, so not sure how  to write it       const removeActiveMenu = () => {        const elem = document.querySelector('.highlight');        if (window.innerWidth < 768) {          elem.classList.remove('highlight');        }      };      menuLinks.addEventListener('resize', removeActiveMenu);有谁知道如何防止我的highlight班级出现在 768 像素以下的屏幕尺寸上？我试图在下面添加一个调整大小事件，但没有成功，所以不确定我应该如何实现它？这是 HTML  // Realized my Logo isn't highlighting the home nav when I click it   <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>

Answer 1

您可以使用querySelectorAllalong withforEach来获取所有内容.navbar__links并在您将其放入视图highlight中时从它们中删除类。resizewindowmobile

您的代码也在生成控制台errors，因为您试图remove从element单击菜单项时不存在的类进行分类，并且window < 768

//Remove class from others when click on li

  if (elem && window.innerWidth < 768 || elem) {

    elem.classList.remove('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

    }

  })

});

我已经修复了你的问题code并且正在按预期工作。

现场演示：

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

const menuLinks = document.querySelector('.navbar__menu');

const activeMenu = e => {

  const elem = document.querySelector('.highlight');

  // adds 'highlight' class to my menu item here

  if (window.innerWidth > 768) {

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

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

}

<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 navbar__links" id="signup">Sign Up</a>

  </li>

</ul>

Answer 2

解决方案：

function activeMenu(e) {

    let links = document.querySelectorAll('.navbar__links');

    if (window.innerWidth > 768) {

       links.forEach(link => {

           link.classList.remove("highlight");

       })

       e.classList.add("highlight");

    } else {

        e.classList.remove("highlight");

    }

}

.highlight {color:red !important}

<div id="mobile-menu">#mobile-menu</div>

<div class="navbar__menu">

    <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div>

    <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div>

    <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div>

</div>