使用原生Javascript - 在点击元素1时向其添加class，同时从元素2上移除class。

25 浏览
0 Comments

使用原生Javascript - 在点击元素1时向其添加class，同时从元素2上移除class。

有人告诉我不能在我正在构建的项目上继续使用jQuery，所以我被迫使用原始的Javascript，有时可能超出我的能力。我希望能简单地将这个jQuery转换为JavaScript。我在Stack Overflow上搜索了很久没有结果，但我觉得这不应该难到那里去。任何帮助都将是令人惊喜的！

$('.navbuttoncontainer a').on( 'click', function() {
$('.navbuttoncontainer .current').removeClass('current');
$(this).addClass('current');

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

所有现代浏览器都支持document.querySelector/document.querySelectorAll，它们本质上与jQuery $函数相同。
（有关受支持的浏览器信息，请查看http://caniuse.com/#feat=queryselector。）
DOM API在元素上公开了一个叫做className的属性，而不是在jQuery对象上调用addClass/removeClass。这与元素的class属性相同：

this.className = 'current';

最后，事件处理程序是使用addEventListener函数注册的。参数是事件名称和事件处理程序函数。

0
0 Comments

你可以在 .navbuttoncontainer 元素上附加一个 click 事件监听器。

然后通过检查目标元素的标记名称（e.target）确定是否点击了 a 元素。 使用元素的 classList 属性上的 .add()/.remove() 方法来添加/删除类。

document.querySelector('.navbuttoncontainer').addEventListener('click', function (e) {
  var target = e.target;
  if (target.tagName === 'A') {
    e.currentTarget.querySelector('.current').classList.remove('current');
    target.classList.add('current');
  }
});


.current {
  color: #f00;
}


  Initially current item
  Second item
  Third item

0