咨询：如何实现按钮控制仅显示对应字母段落的JS功能

你的代码目前只完成了「隐藏所有段落」的第一步，缺少显示对应段落的逻辑，而且按钮的传参也有问题，下面一步步修正：

1. 修正按钮的点击传参 #

原来的onClick="toggle(this,id)"里的id是未定义的，直接传点击的按钮元素即可，把HTML里的按钮点击事件改成：

<button class="a" onClick="toggle(this)">a</button>
<button class="b" onClick="toggle(this)">b</button>
<button class="c" onClick="toggle(this)">c</button>

2. 修改JS函数逻辑 #

先隐藏所有.text元素，再根据点击按钮的类名，找到对应类的段落并移除hidden类：

function toggle(clickedBtn) {
  // 获取所有段落容器
  const allTexts = document.querySelectorAll(".text");
  // 先给所有段落加hidden类，统一隐藏
  allTexts.forEach(text => text.classList.add("hidden"));
  
  // 获取点击按钮的类名（比如"a"、"b"）
  const targetClass = clickedBtn.className;
  // 找到同时拥有text类和对应字母类的段落容器
  const targetText = document.querySelector(`.text.${targetClass}`);
  // 如果找到目标元素，移除hidden类让它显示
  if (targetText) {
    targetText.classList.remove("hidden");
  }
}

完整代码示例 #

HTML #

<div class="button">
  <button class="a" onClick="toggle(this)">a</button>
  <button class="b" onClick="toggle(this)">b</button>
  <button class="c" onClick="toggle(this)">c</button>
</div>

<div class="main">
  <div class="a text">
    <p>a</p>
  </div>
  
  <div class="b text">
    <p>b</p>
  </div>
  
  <div class="c text">
    <p>c</p>
  </div>
</div>

CSS #

.hidden {
  display: none;
}

JS #

function toggle(clickedBtn) {
  const allTexts = document.querySelectorAll(".text");
  allTexts.forEach(text => text.classList.add("hidden"));
  
  const targetClass = clickedBtn.className;
  const targetText = document.querySelector(`.text.${targetClass}`);
  if (targetText) {
    targetText.classList.remove("hidden");
  }
}

逻辑说明 #

• 第一步遍历所有.text元素，统一添加hidden类，确保所有段落先被隐藏；
• 然后通过点击按钮的类名，用复合选择器.text.${targetClass}精准定位对应段落，移除hidden类让它显示；
• 加入if (targetText)判断是为了避免找不到元素时出现报错。

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