Question

使用PLAIN JavaScript将活动类添加到“active / current”元素的最佳方法是什么？

使用jQuery，您将使用典型的：

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

但是使用JavaScript（不是vanilla JS，jQuery等）??

继承我的小提琴：http://jsfiddle.net/meEf4/2065/

Answer 1

您可以先获取具有active类的元素。由于只有一个<a>具有active类，因此您可以直接访问<a>现在替换active类将不会发送文本。最后，将active类添加到单击的<a>元素。

首先将点击处理程序附加到所有<a>标记：

const navAnchor = document.querySelectorAll('a');

navAnchor.forEach(anchor => {
  anchor.addEventListener('click', addActive);
})

现在，创建一个函数addActive，如下所示：

function addActive(e) {
  const current = document.querySelector('.active');
  current.className = current.className.replace("active", "");
  e.target.className += "active";

}

使用JS（而不是Jquery）将活动类添加到当前元素

1 个答案: