单击导航项，添加类，从其他导航项中删除类-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');
    } 
  });
});