使用类名切换CSS类报错，如何实现同一时间仅一个红色区块可见

你现有代码的核心问题是：document.getElementsByClassName返回的是包含所有匹配类名元素的类数组集合，不是单个DOM元素，直接调用classList属性会直接报错，这是代码无法生效的根本原因。

要实现同一时间仅一个红色区块可见的单选互斥效果，调整方案如下： #

调整后的完整代码 #

HTML代码

<!-- 新增data-target属性绑定对应要控制的展示区块ID -->
<div class="mainmenu" onclick="hideshowmenu(event)" data-target="box1">RED1</div>
<div class="box" id="box1"></div>
<div id="submenu" class="submenu">
  <div class="mainmenu" onclick="hideshowmenu(event)" data-target="box2">RED2</div>
  <div class="box" id="box2"></div>
</div>

CSS代码

/* 原有样式保留，可选补充默认隐藏规则避免空元素占位 */
.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}
/* 可选默认样式 */
.box {
  display: none;
}
.box.bg-red {
  display: block;
}

JS代码

function hideshowmenu(e) {
  // 获取当前点击项对应的目标box元素
  const targetBoxId = e.currentTarget.dataset.target;
  const targetBox = document.getElementById(targetBoxId);
  const isCurrentActive = targetBox.classList.contains('bg-red');

  // 第一步：清空所有box的激活状态，保证同一时间最多只有一个可见
  const allBoxes = document.getElementsByClassName('box');
  for (const box of allBoxes) {
    box.classList.remove('bg-red');
  }

  // 第二步：如果当前点击对应区块之前未激活就显示，已激活则保持关闭，支持点击同一项收起的效果
  if (!isCurrentActive) {
    targetBox.classList.add('bg-red');
  }
}

核心调整说明 #

• 给每个点击触发区新增data-target自定义属性，和对应的展示区块ID绑定，匹配逻辑更稳定，不受DOM结构变化影响
• 每次触发切换时先统一移除所有区块的激活类，实现单选互斥效果
• 修复了原代码对类数组集合直接操作classList的语法错误

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