className.remove方法失效：点击按钮移除active类报错（Uncaught TypeError）及替代实现方案咨询

先帮你理清报错的根源，再给你可行的修复方案和其他实现思路：

首先，你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'remove')是因为：
container.getElementsByClassName("active")返回的是HTMLCollection元素集合，不是单个DOM元素，所以current.className是undefined，调用remove自然会报错。另外，document.getElementById(this.btn)里的this.btn完全不存在——你在onclick事件里传的是this（当前点击的按钮），应该直接用这个参数来操作目标按钮。

先修复你的现有代码 #

把openFeed函数改成这样，就能正常生效了：

function openFeed(btn) {
  var container = document.getElementById("btn-tab");
  // 获取所有带active类的元素，转成数组后循环移除类
  var currentActiveItems = Array.from(container.getElementsByClassName("active"));
  currentActiveItems.forEach(item => {
    item.classList.remove("active");
  });
  // 给当前点击的按钮添加active类
  btn.classList.add("active");
}

这里用classList.remove/add比直接操作className更安全，不会不小心覆盖按钮上的其他类名。

除了querySelector/querySelectorAll，还有这些方法可以实现类的移除 #

1. 用jQuery（你的WordPress已经加载了jQuery，直接用就行）

jQuery会自动处理元素集合，写法更简洁：

function openFeed(btn) {
  // 移除容器里所有active类
  $("#btn-tab .active").removeClass("active");
  // 给当前按钮加active类
  $(btn).addClass("active");
}

2. 遍历父元素的children属性

直接遍历容器下的子元素，找到active类的元素移除：

function openFeed(btn) {
  var container = document.getElementById("btn-tab");
  // 遍历容器下的所有子按钮
  for (let child of container.children) {
    if (child.classList.contains("active")) {
      child.classList.remove("active");
      break; // 因为只有一个active，找到就停止循环，提升性能
    }
  }
  btn.classList.add("active");
}

3. 用getElementsByTagName定位按钮

如果你的容器里只有按钮元素，也可以用这个方法：

function openFeed(btn) {
  var allButtons = document.getElementById("btn-tab").getElementsByTagName("button");
  // 遍历所有按钮，移除active类
  for (let button of allButtons) {
    button.classList.remove("active");
  }
  btn.classList.add("active");
}

额外的小优化建议 #

• 你的CSS里有个错误的选择器：.tablinks .active是后代选择器，应该改成.tablinks.active，这样才能正确选中同时带有tablinks和active类的按钮，样式才会生效。
• 你的PHP Ajax代码里，if ($_POST == "latestNews")要改成if ($type == "latestNews")——你已经把$_POST["postType"]赋值给了$type，现在的写法是把整个$_POST数组和字符串比较，永远不会触发这个分支。

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