单击时如何激活链接，并停用 javascript 中的其他链接？

Question

当我单击链接时，我试图只处理一个元素，但是当我单击另一个元素时，它不会删除其他链接的活动。 谁能帮我？ 这是我的代码。 . .

let parentT = document.querySelector('.menu-item'); //PARENT
let allEl = parentT.querySelectorAll('a'); // ELEMENTS INSIDE PARENT

allEl.forEach(elem =>{   
  elem.addEventListener('click', (event) => { 
    event.preventDefault(); 
      event.target.setAttribute('class', 'active');
      if(event.target.classList == "active") { 
         console.log(event.target);

      }
  }); 
});

我尝试了一些方法但没有结果。

Answer 1

我想这就是你想要的。 单击一个元素时，此代码循环遍历所有锚元素，并从所有元素中删除活动的 class，然后将活动的 class 添加到单击的元素。

 let parentT = document.querySelector('.menu-item'); //PARENT let allEl = parentT.querySelectorAll('a'); // ELEMENTS INSIDE PARENT allEl.forEach(elem =>{ elem.addEventListener('click', (event) => { event.preventDefault(); allEl.forEach(el => { el.classList.remove('active'); }); event.target.classList.add('active'); }); });

 .active { color: red; }

 <div class="menu-item"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div>