如何使用 event.target 在元素之间切换 class？

Question

我正在使用 javaScript 创建简单的应用程序，我必须导航链接，我想给他们 class uing event.target ，我有两个不同的功能，我的目标是切换 ZA2F2ED4F8EBC2CBB4C21A29DC40AB61 在这两个导航链接之间的示例链接，我想给这个链接.active class，如果我点击 home2，我想从 home 链接中删除.active class 并将它给 home2 链接，我想使用 Vanilla Z686155AF75A60A0F6E9D80C 解决这个问题？

 function goHome(event){ event.target.classList.add('active') } function goSomeWhere(event){ event.target.classList.add('active') }

 .active{ color:red; }

 <div class="menu"> <li onclick="goHome(event)" class="primery ">home</li> <li onclick="goSomeWhere(event)" class="primary2">home2</li> </div>

Answer 1

您可以首先从应用的任何 class 中删除活动的 class，然后将其应用到用户单击的那个。 看起来像这样：

const menu = document.getElementById('menu');

menu.addEventListener('click', (event) => {
    menu.querySelectorAll('.active')
        .forEach(link => link.classList.remove('active');

    event.target.classList.add('active');
});

假设您将menu的 id 放在 div 上，这应该可以工作，但我建议您将 div 更改为 nav，因为它是用于导航的元素，而 div 不表达这一点。

使用这种方法，您还可以删除列表项的onclick属性。