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&nbsp; if (elem && window.innerWidth < 768 || elem) {&nbsp; &nbsp; elem.classList.remove('highlight');&nbsp; }在调整大小功能上使用此代码：//on resizewindow.addEventListener('resize', function(event) {&nbsp; const links = document.querySelectorAll('.navbar__links');&nbsp; links.forEach(function(x) {&nbsp; &nbsp; if (window.innerWidth < 768) {&nbsp; &nbsp; &nbsp; x.classList.remove('highlight'); //remove highlught class&nbsp; &nbsp; }&nbsp; })});我已经修复了你的问题code并且正在按预期工作。现场演示：const menu = document.querySelector('#mobile-menu');const menuLinks = document.querySelector('.navbar__menu');const activeMenu = e => {&nbsp; const elem = document.querySelector('.highlight');&nbsp; // adds 'highlight' class to my menu item here&nbsp; if (window.innerWidth > 768) {&nbsp; &nbsp; e.target.classList.add('highlight');&nbsp; }&nbsp; //Remove class from others when click on li&nbsp; if (elem && window.innerWidth < 768 || elem) {&nbsp; &nbsp; elem.classList.remove('highlight');&nbsp; }};//Click event on limenuLinks.addEventListener('click', activeMenu);//on resizewindow.addEventListener('resize', function(event) {&nbsp; const links = document.querySelectorAll('.navbar__links');&nbsp; links.forEach(function(x) {&nbsp; &nbsp; if (window.innerWidth < 768) {&nbsp; &nbsp; &nbsp; x.classList.remove('highlight'); //remove highlught class&nbsp; &nbsp; }&nbsp; })});.highlight {&nbsp; background: red;}<ul class="navbar__menu">&nbsp; <li class="navbar__item">&nbsp; &nbsp; <a href="#home" class="navbar__links" id="homePage">Home</a>&nbsp; </li>&nbsp; <li class="navbar__item">&nbsp; &nbsp; <a href="#about" class="navbar__links" id="about-us">About&nbsp; &nbsp; &nbsp; &nbsp; Us</a>&nbsp; </li>&nbsp; <li class="navbar__item">&nbsp; &nbsp; <a href="#services" class="navbar__links" id="service">Services</a>&nbsp; </li>&nbsp; <li class="navbar__btn">&nbsp; &nbsp; <a href="#sign-up" class="button navbar__links" id="signup">Sign Up</a>&nbsp; </li></ul>

Answer 2

解决方案：function activeMenu(e) {&nbsp; &nbsp; let links = document.querySelectorAll('.navbar__links');&nbsp; &nbsp; if (window.innerWidth > 768) {&nbsp; &nbsp; &nbsp; &nbsp;links.forEach(link => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;link.classList.remove("highlight");&nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; &nbsp; &nbsp;e.classList.add("highlight");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; e.classList.remove("highlight");&nbsp; &nbsp; }}.highlight {color:red !important}<div id="mobile-menu">#mobile-menu</div><div class="navbar__menu">&nbsp; &nbsp; <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div>&nbsp; &nbsp; <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div>&nbsp; &nbsp; <div onclick="activeMenu(this)" class="navbar__links">navbar__links</div></div>