单页网站三表单切换：点击统一类名按钮实现显隐切换求助

嘿，我清楚你要实现的是三个表单的依次切换效果——初始只有第一个表单显示，点击每个表单里的统一类名按钮就切换到下一个。下面直接给你可行的代码方案，帮你搞定这个需求：

先补全你的表单结构（方便代码对应） #

<div class="container-fluid">
  <!-- 第一个表单：初始激活状态 -->
  <form class="form active">
    <!-- 这里放你的第一个表单内容 -->
    <button type="button" class="all-pages">下一步</button>
  </form>
  <!-- 第二个表单：初始隐藏状态 -->
  <form class="form hidden">
    <!-- 这里放你的第二个表单内容 -->
    <button type="button" class="all-pages">下一步</button>
  </form>
  <!-- 第三个表单：初始隐藏状态 -->
  <form class="form hidden">
    <!-- 这里放你的第三个表单内容 -->
    <button type="button" class="all-pages">完成</button>
  </form>
</div>

必要的CSS样式（确保隐藏/激活生效） #

虽然你没提样式，但得确保hidden和active类能控制显示隐藏，简单写一下基础样式：

/* 隐藏类：让元素不显示 */
.hidden {
  display: none;
}
/* 激活类：让元素显示 */
.active {
  display: block;
}

核心JavaScript实现 #

// 获取所有表单元素和所有切换按钮
const forms = document.querySelectorAll('.form');
const switchButtons = document.querySelectorAll('.all-pages');

// 给每个按钮绑定点击事件
switchButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 找到当前处于激活状态的表单
    const currentActiveForm = document.querySelector('.form.active');
    // 获取当前表单的下一个兄弟元素（也就是下一个表单）
    const nextForm = currentActiveForm.nextElementSibling;

    // 检查下一个元素是否存在，并且是我们的表单元素（避免容器里有其他干扰元素）
    if (nextForm && nextForm.classList.contains('form')) {
      // 切换当前表单的状态：移除激活，添加隐藏
      currentActiveForm.classList.remove('active');
      currentActiveForm.classList.add('hidden');
      // 切换下一个表单的状态：移除隐藏，添加激活
      nextForm.classList.remove('hidden');
      nextForm.classList.add('active');
    }

    // 可选：如果已经到了第三个表单，点击按钮可以加个提示或者其他操作
    // else {
    //   alert('所有表单步骤已完成！');
    // }
  });
});

代码逻辑说明 #

1. 先获取所有表单和按钮，确保能拿到需要操作的DOM元素
2. 给每个按钮绑定点击事件，不管点击哪个按钮，逻辑都是找到当前激活的表单
3. 通过nextElementSibling获取下一个兄弟表单，同时做判断确保它是我们的表单元素，避免容器里的其他元素干扰
4. 切换类名实现显示隐藏的切换
5. 如果已经到了第三个表单，点击按钮不会触发切换，你可以根据需求添加额外的处理逻辑，比如提示用户完成

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