我想同时使一个链接处于活动状态，其余链接处于非活动状态。它是有效的，但我想问有没有更好的方法做这件事？因为如果有更多的元素，我将不得不编写更多相同的代码行。我知道有伪元素:checked，但我想它只适用于复选框和收音机。

const first = document.querySelector('.first'); const second = document.querySelector('.second'); const third = document.querySelector('.third'); first.addEventListener('click', ()=>{ first.classList.add('active'); second.classList.remove('active'); third.classList.remove('active'); }) second.addEventListener('click', ()=>{ second.classList.add('active'); first.classList.remove('active'); third.classList.remove('active'); }) third.addEventListener('click', ()=>{ third.classList.add('active'); second.classList.remove('active'); first.classList.remove('active'); }) body{ min-height: 100vh; display:flex; align-items:center; justify-content:center; } ul{ display:flex; list-style:none; } ul li{ margin: 0rem 1rem; } ul a{ color: black; text-decoration: none; } .first.active{ color: hsl(220, 98%, 61%); } .second.active{ color: hsl(220, 98%, 61%); } .third.active{ color: hsl(220, 98%, 61%); } <ul> <li> <a href="#" class="link first">Link1</a> </li> <li> <a href="#" class="link second">Link2</a> </li> <li> <a href="#" class="link third">Link3</a> </li> </ul>

顺晟科技：

您可以创建一个函数来处理元素的切换，这比为每个事件侦听器添加新代码更有意义。然后，您的事件侦听器也可以包括该事件，这样您就可以跟踪单击了哪个元素。

const links = document.querySelectorAll('.link'); const hideElement = (element) => { if (element.classList.contains('active')) { element.classList.remove('active'); } } const showElement = (element) => { if (!element.classList.contains('active')) { element.classList.add('active'); } } const handleClick = (event) => { let element = event.target; links.forEach(link => hideElement(link)); showElement(element); } links.forEach(link => { link.addEventListener('click', (event) => { handleClick(event) }) }); body{ min-height: 100vh; display:flex; align-items:center; justify-content:center; } ul{ display:flex; list-style:none; } ul li{ margin: 0rem 1rem; } ul a{ color: black; text-decoration: none; } .link.active{ color: hsl(220, 98%, 61%); } <ul> <li> <a href="#" class="link">Link1</a> </li> <li> <a href="#" class="link">Link2</a> </li> <li> <a href="#" class="link">Link3</a> </li> </ul>

类似

var list = document.querySelectorAll(".first, .second, .third");

list.forEach(element => element.addEventListener(
    'click', () => {
        list.foreach(e2 => e2.classList.remove('active'));
        element.classList.add('active');
    }
));