使用原生JavaScript移除容器内子元素类名实现Tab切换的问题

嘿，我明白你遇到的问题了！你想实现点击Tab时先移除所有Tab的active类，再给当前点击的Tab加上，这个思路完全没问题，但问题出在遍历子元素的方式和移除类名的方法上，我来帮你修正：

问题分析 #

你用了for (let child in parent)来遍历parentNode.children，但children返回的是HTMLCollection（类数组对象），for...in会遍历它的所有可枚举属性（比如length、item方法这些），而这些属性并不是DOM元素，所以访问parent[child.value].className自然会报错，因为这些属性没有className。

另外，直接把className设为空字符串会把Tab原本的toggleSection类也删掉，这可不是你想要的——我们只需要移除toggleSectionActive这个active类就行。

修正后的实现方案 #

这里给你两种可行的原生JS写法，都能解决问题：

方法1：用for...of遍历HTMLCollection

for...of可以直接遍历HTMLCollection里的DOM元素，不会拿到额外属性：

function toggleActive(event) {
  const element = event.currentTarget;
  // 获取所有Tab子元素
  const tabs = element.parentNode.children;
  
  // 遍历所有Tab，移除active类
  for (const tab of tabs) {
    tab.classList.remove("toggleSectionActive");
  }
  
  // 给当前点击的Tab添加active类
  element.classList.add("toggleSectionActive");
}

方法2：转成数组后用forEach遍历

如果需要兼容更老的浏览器（比如IE），可以把HTMLCollection转成数组再遍历：

function toggleActive(event) {
  const element = event.currentTarget;
  const tabs = Array.from(element.parentNode.children);
  
  tabs.forEach(tab => {
    tab.classList.remove("toggleSectionActive");
  });
  
  element.classList.add("toggleSectionActive");
}

额外提示 #

• 不要直接修改className，用classList.add()/remove()/toggle()方法更安全，能精准操作单个类名，不会影响原有类。
• 你也可以给父元素#middleCol加个ID，直接通过document.getElementById('middleCol').children获取所有Tab，这样代码更清晰，不用依赖element.parentNode。

这样修改后，点击Tab时就会先移除所有Tab的active类，再给当前Tab加上，不会再出现报错啦！

内容的提问来源于stack exchange，提问作者luther wardle