新手求助：如何实现多按钮点击时显示各自对应的子元素？

嘿，别担心新手问题完全没问题！咱们一步步搞定这个按钮点击显示对应子元素的需求～

问题根源 #

你现在的代码里固定获取了某个特定ID的元素（比如document.getElementById("about")），所以只有第一个按钮能触发对应元素的显示；而且你尝试的循环写法也有语法问题（比如for( var i = 1; i++ )会导致无限循环），没法正确遍历所有按钮和子元素。

解决方案一：用自定义data-*属性关联（最灵活） #

这种方法让按钮和子元素通过自定义属性明确绑定，不管DOM结构怎么变都能生效。

第一步：调整HTML结构

给每个按钮加上data-target属性，值对应子元素的ID：

<button class="toggle-btn" data-target="about1">按钮1</button>
<div id="about1" class="hid">子元素1的内容</div>

<button class="toggle-btn" data-target="about2">按钮2</button>
<div id="about2" class="hid">子元素2的内容</div>

<button class="toggle-btn" data-target="about3">按钮3</button>
<div id="about3" class="hid">子元素3的内容</div>

第二步：编写JavaScript逻辑

获取所有按钮，给每个绑定点击事件，点击时找到对应子元素切换显示状态：

// 获取所有切换按钮
const toggleButtons = document.querySelectorAll('.toggle-btn');

// 遍历按钮，绑定点击事件
toggleButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 从当前按钮拿到目标子元素的ID
    const targetId = this.getAttribute('data-target');
    // 找到对应的子元素
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 切换隐藏/显示类（假设`.hid`是隐藏样式类）
      targetElement.classList.toggle('hid');
      // 如果你的需求是「点击当前显示，其他隐藏」，可以再加隐藏所有其他元素的逻辑，后面会说
    }
  });
});

解决方案二：利用相邻兄弟元素（无需写ID） #

如果按钮和对应的子元素是紧挨着的相邻DOM节点，那可以直接通过兄弟关系获取子元素，不用额外加ID：

HTML结构

<button class="toggle-btn">按钮1</button>
<div class="hid">子元素1的内容</div>

<button class="toggle-btn">按钮2</button>
<div class="hid">子元素2的内容</div>

JavaScript逻辑

const toggleButtons = document.querySelectorAll('.toggle-btn');

toggleButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮的下一个兄弟元素（就是对应的子元素）
    const targetElement = this.nextElementSibling;
    if (targetElement) {
      targetElement.classList.toggle('hid');
    }
  });
});

进阶：点击当前显示，隐藏其他子元素 #

如果你的需求是每次只显示一个子元素，点击新按钮时隐藏之前的，只显示当前对应元素，可以这样修改：

const toggleButtons = document.querySelectorAll('.toggle-btn');
// 获取所有需要切换的子元素
const allTargetElements = document.querySelectorAll('.hid');

toggleButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 先隐藏所有子元素
    allTargetElements.forEach(element => {
      element.classList.add('hid');
    });
    
    // 再显示当前按钮对应的子元素
    const targetElement = this.nextElementSibling; // 或者用data-target的方式获取
    if (targetElement) {
      targetElement.classList.remove('hid');
    }
  });
});

这样不管你有多少个按钮，都能完美关联对应的子元素啦～

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