單擊導航項，添加類，從其他導航項中刪除類-Vanilla JS

Question

單擊該項目后，我就可以向其添加一個is-active類。 但是，我想刪除該類，並在單擊另一個時將其添加到另一個導航項。

這是我目前正在使用的內容：

JS：

const links = document.querySelectorAll('a');

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
    }
  });
});

這是一個Codepen示例。

這種嘗試會添加該類，但是在單擊另一個鏈接時不會將其刪除。

我將如何刪除課程？ 提前致謝。

Answer 1

您只需遍歷不是this的鏈接：

const links = document.querySelectorAll('a');

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
      links.forEach(l => {                     // ***
          if (l !== this) {                    // ***
              l.classList.remove('is-active'); // ***
          }                                    // ***
      });
    }
  });
});

（見下面的for-of版本。）

或者，您可以僅對is-active鏈接執行新查詢：

document.querySelectorAll('a').forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      document.querySelectorAll('a.is-active').forEach(activeLink => { // ***
          activeLink.classList.remove('is-active');                    // ***
      });                                                              // ***
      this.classList.add('is-active');
    }
  });
});

或者，如果您願意，因為應該只有一個，所以請使用querySelector ：

document.querySelectorAll('a').forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      const activeLink = document.querySelector('a.is-active'); // **
      if (activeLink) {                                         // **
          activeLink.classList.remove('is-active');             // **
      }                                                         // **
      this.classList.add('is-active');
    }
  });
});

---

旁注： querySelectorAll中的NodeList在某些瀏覽器中沒有forEach （它是最近才添加的）。 請參閱此答案以了解如何在缺少它時添加它，以及（在ES2015 +平台上）如何確保它也是可迭代的（這也是它的本意）。

---

如果可以依靠可迭代性，則for-of是這些for-of版本：

第一個示例for-of版：

const links = document.querySelectorAll('a');
for (const link of links) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
      for (const l of links) {
          if (l !== this) {
              l.classList.remove('is-active');
          }
      }
    }
  });
}

第二個示例for-of版：

for (const link of document.querySelectorAll('a')) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      for (const activeLink of document.querySelectorAll('a.is-active')) {
          activeLink.classList.remove('is-active');
      }
      this.classList.add('is-active');
    }
  });
}

第三：

for (const link of document.querySelectorAll('a')) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      const activeLink = document.querySelector('a.is-active'); // **
      if (activeLink) {                                         // **
          activeLink.classList.remove('is-active');             // **
      }                                                         // **
      this.classList.add('is-active');
    }
  });
}

Answer 2

常見要求-您可以執行以下操作：

• 使用[...document.querySelectorAll('a')]類的spread syntax獲取DOM元素的可迭代表示形式

• 使用forEach 循環通過鏈接

• 您可以使用classList.toggle函數代替if-else條件

請參見下面的演示：

 // get an iterable representation using the spread syntax const elements = [...document.querySelectorAll('a')]; elements.forEach(e => e.addEventListener('click', () => { // remove active class from all links elements.forEach(e => e.classList.remove('is-active')); // add active to the clicked link e.classList.toggle('is-active'); })); 

 .is-active { color: red; } 

 <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> 

Answer 3

this函數中的this表示單擊的元素。 每次單擊時都應使用forEach來隱藏所有元素。 然后顯示所需的一個

const links = [...document.querySelectorAll('a')];

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    let temp = this.classList.contains('is-active')
    links.forEach(x => x.classList.remove('is-active'))
    if(!temp) {
      this.classList.add('is-active');
    } 
  });
});