使用JavaScript将下一步和上一步按钮添加到模式

<div id="steps-container">
  <div id="step1" class="step">
    <!-- 第一步的内容 -->
  </div>
  
  <div id="step2" class="step">
    <!-- 第二步的内容 -->
  </div>
  
  <div id="step3" class="step">
    <!-- 第三步的内容 -->
  </div>
</div>

<button id="prev-btn">上一步</button>
<button id="next-btn">下一步</button>

// 获取按钮和步骤容器的引用
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const stepsContainer = document.getElementById('steps-container');

// 获取所有步骤的引用
const steps = Array.from(stepsContainer.getElementsByClassName('step'));

// 当前步骤的索引
let currentStepIndex = 0;

// 隐藏所有步骤，除了第一个步骤
steps.forEach((step, index) => {
  if (index === 0) {
    step.style.display = 'block';
  } else {
    step.style.display = 'none';
  }
});

// 上一步按钮的点击事件处理程序
prevBtn.addEventListener('click', () => {
  if (currentStepIndex > 0) {
    steps[currentStepIndex].style.display = 'none';
    currentStepIndex--;
    steps[currentStepIndex].style.display = 'block';
  }
});

// 下一步按钮的点击事件处理程序
nextBtn.addEventListener('click', () => {
  if (currentStepIndex < steps.length - 1) {
    steps[currentStepIndex].style.display = 'none';
    currentStepIndex++;
    steps[currentStepIndex].style.display = 'block';
  }
});