Multi-step wizard form定制求助：调整步骤显示交互逻辑

核心逻辑实现思路 #

• 默认仅显示第一个表单步骤，其余步骤隐藏
• 点击「Next」按钮：显示下一个步骤，保留所有已访问步骤的可见状态
• 点击「Prev」按钮：隐藏当前步骤，返回上一个可见步骤

代码修改示例 #

1. CSS 样式（配合显示/隐藏逻辑）

/* 默认隐藏所有步骤 */
.step {
  display: none;
  margin: 1rem 0;
}
/* 激活状态的步骤显示 */
.step.active {
  display: block;
  /* 若需要横向排列，可替换为 display: flex/inline-block 并调整布局 */
}

2. JavaScript 交互逻辑

// 获取所有步骤和按钮元素
const steps = document.querySelectorAll('.step');
const nextBtns = document.querySelectorAll('.next-btn');
const prevBtns = document.querySelectorAll('.prev-btn');

// 初始化当前步骤索引，默认显示第一步
let currentStepIndex = 0;
steps[currentStepIndex].classList.add('active');

// 处理Next按钮点击事件
nextBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 未到最后一步时，显示下一个步骤
    if (currentStepIndex < steps.length - 1) {
      currentStepIndex++;
      steps[currentStepIndex].classList.add('active');
      // 可在此添加步骤指示器更新、表单验证等逻辑
    }
  });
});

// 处理Prev按钮点击事件
prevBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 不是第一步时，隐藏当前步骤并返回上一步
    if (currentStepIndex > 0) {
      steps[currentStepIndex].classList.remove('active');
      currentStepIndex--;
      // 可在此添加步骤指示器更新等逻辑
    }
  });
});

关键注意事项 #

• 请根据你现有HTML结构调整选择器（比如.step、.next-btn需匹配实际元素类名）
• 如果需要表单验证，可在Next按钮点击事件中添加校验逻辑，通过后再切换步骤
• 若步骤需要横向排列，修改.step.active的display属性并补充布局样式即可

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