Web应用步骤矩阵导航回退与重置功能异常问题求助

阿华AIGC实验室

2026-4-13

我目前在学习Web开发，同时也懂一点Python，于是给自己安排了一个看起来简单的步骤式Web应用开发任务，但现在卡在了导航回退和重置的问题上。

这个应用是一系列Yes/No问答组成的步骤矩阵：用户点击对应按钮进入下一个步骤，我还做了「返回上一步」「重新开始」和「返回主菜单」的按钮。前进浏览步骤的时候一切正常，只会显示当前的步骤，但当用户想回退一步或者回到起点时，就出问题了——返回后会同时显示之前的多个步骤，而不是只显示目标步骤。

我感觉这应该是个不起眼的小问题，但调试的时候就是抓不住关键，麻烦各位帮忙看看哪里出错了。

期望效果（点击「Back」后的正确显示）

期望的回退显示效果

实际错误效果

实际的错误回退显示效果

我已经尝试的解决思路

确保每个section都有唯一ID，且所有步骤都包含了「Back」和「Start Over」按钮
更新JavaScript来处理导航历史，确保只有当前步骤可见
尝试让prevStep和startOver函数先隐藏当前步骤，再显示目标步骤

相关代码

我把应用的HTML、CSS和JavaScript代码贴在下面：

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fire Tank Troubleshooting Guide</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>FFTTG System Won't Run</h1>
  </header>
  <main>
    <section id="step1">
      <h2>Step 1: System Won’t Turn On</h2>
      <p>Hydraulic Pump Won’t Run</p>
      <p>Are any LED’s illuminated on the Isolair Display Box?</p>
      <button onclick="nextStep('step2Yes')">YES</button>
      <button onclick="nextStep('step2No')">NO</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2Yes" style="display:none;">
      <h2>Step 2: Toggle the Jettison Switch</h2>
      <p>Toggle the Jettison Switch a few times and make
        sure it is in the normal operating position -UP.
        Does the system turn on?</p>
      <button onclick="nextStep('step3.0Yes')">YES</button>
      <button onclick="nextStep('step3.1No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step2No" style="display:none;">
      <h2>Step 2: Circuit Breakers</h2>
      <p>Have any of the Circuit Breakers on the Isolair
        Display box popped?</p>
      <button onclick="nextStep('step3.2Yes')">YES</button>
      <button onclick="nextStep('step3.3No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.0Yes" style="display:none;">
      <h2>Step 3.1: Jettison Switch</h2>
      <p>Jettison Switch was in ‘off’
        position or was faulty and
        beginning to fail. If this was
        the case, change Jettison
        switch ASAP</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.1No" style="display:none;">
      <h2>Step 3.1: Change Cyclic Controller</h2>
      <p>Change Cyclic Controller. Does system turn on?</p>
      <button onclick="nextStep('step4.1Yes')">YES</button>
      <button onclick="nextStep('step4.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.2Yes" style="display:none;">
      <h2>Step 3.2: Circuit Breakers</h2>
      <p>Reset and try again</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step3.3No" style="display:none;">
      <h2>Step 3.2: Ground Power?</h2>
      <p>Are you operating off ground power? (engines not running?)</p>
      <button onclick="nextStep('step214Yes')">214 Ground Power</button>
      <button onclick="nextStep('stepBUSNo')">204 & OR No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step214Yes" style="display:none;">
      <h2>Step 214: Ground Power</h2>
      <p>Ensure ‘NON-ESSENTIAL BUS’ is in the Manual position. Does System now turn on?</p>
      <button onclick="nextStep('stepBUSYes')">Yes</button>
      <button onclick="nextStep('stepBUSNo')">No</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="stepBUSYes" style="display:none;">
      <h2>Step BUS: Manual Position</h2>
      <p>214’s must always have ‘Manual’ selected when checking from ground power</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>
</body>
</html>

CSS代码

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em 0;
  text-align: center;
}

main {
  padding: 1em;
}

section {
  margin-bottom: 1em;
}

button {
  margin: 0.5em;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.card {
  border: 1px solid #ccc;
  padding: 1em;
  margin: 1em 0;
  background-color: #fff;
}

.card img {
  max-width: 100px;
  margin-right: 10px;
  vertical-align: middle;
}

#Control-box-front {
  transition: all 0.3s ease;
}

#Control-box-front:hover {
  content: url('public/images/Control-box-front-green.png');
}

/* From Uiverse.io by chase2k25 */
.card {
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background: linear-gradient(145deg, #333, #000);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.4em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card p {
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  transition: flex 0.5s;
  background: linear-gradient(145deg, #212121, #000);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align items at the top */
}

.card p:hover {
  flex: 4;
}

.card p span {
  padding: 0.2em;
  text-align: center;
  transform: rotate(-0deg);
  transition: transform 0.5s;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

.card p:hover span {
  transform: rotate(0);
}

.card p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  opacity: 0;
}

.card p:hover::before {
  opacity: 1;
}

.card p img {
  max-width: 350px;
  margin-right: 10px;
}

JavaScript代码

let historyStack = [];

function nextStep(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    historyStack.push(currentStep.id);
    currentStep.style.display = 'none';
  }
  document.getElementById(stepId).style.display = 'block';
}

function prevStep() {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  const prevStepId = historyStack.pop();
  if (prevStepId) {
    document.getElementById(prevStepId).style.display = 'block';
  }
}

function startOver(stepId) {
  const currentStep = document.querySelector('section:not([style*="display: none"])');
  if (currentStep) {
    currentStep.style.display = 'none';
  }
  historyStack = [];
  document.getElementById(stepId).style.display = 'block';
}

function mainMenu() {
  window.location.href = '/FFTTG/FFTG-Home.html';
}

备注：内容来源于stack exchange，提问作者Jezz