單擊時如何激活鏈接，並停用 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>