哦，这个问题我太熟了！getElementsByClassName() 坑过不少刚接触JS的开发者，核心原因是它返回的不是单个DOM元素，而是一个HTMLCollection（类数组的元素集合）——你不能直接对整个集合操作 className 属性，得逐个处理里面的元素才行。

先帮你拆解问题：你第一个能用的函数是通过 getElementById() 操作单个元素，所以直接改 className 没问题；但换成 getElementsByClassName() 后，你大概率是直接给返回的集合赋值 className，这自然不会有任何反应。

正确的实现方式 #

我给你两种靠谱的写法，按需选择：

方法1：遍历HTMLCollection逐个修改

如果坚持用 getElementsByClassName()，要通过循环遍历集合里的每一个元素：

function openTab(tabName) {
  // 1. 获取所有需要隐藏的tab容器（先给所有tab内容加个统一类，比如"tab-content"）
  const allTabs = document.getElementsByClassName("tab-content");
  
  // 2. 遍历集合，把每个tab设为隐藏
  for (let i = 0; i < allTabs.length; i++) {
    allTabs[i].className = "invisible";
  }
  
  // 3. 获取目标tab（注意取集合的第一个元素，因为getElementsByClassName返回多个）
  const targetTab = document.getElementsByClassName(tabName)[0];
  if (targetTab) { // 加个判断避免找不到元素时报错
    targetTab.className = "visible";
  }
}

方法2：用querySelectorAll()更省心（推荐）

querySelectorAll() 返回的是NodeList，支持直接用forEach遍历，代码更简洁：

function openTab(tabName) {
  // 隐藏所有tab内容
  document.querySelectorAll(".tab-content").forEach(tab => {
    tab.className = "invisible";
  });
  
  // 显示目标tab（用querySelector直接取单个元素）
  const targetTab = document.querySelector(`.${tabName}`);
  if (targetTab) {
    targetTab.className = "visible";
  }
}

额外注意事项 #

• 记得给所有tab内容容器加一个统一的类名（比如上面的tab-content），不用再像之前那样逐个写id，扩展性更强
• getElementsByClassName() 返回的是动态集合，DOM变化时会自动更新；而querySelectorAll()是静态集合，日常开发用后者更不容易踩坑
• 一定要加if (targetTab)的判断，避免传入不存在的类名时触发JS报错

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