步骤通过矩阵问题，想返回Web App HTML的一个步骤，CSSJS

Question

我一直在学习Web Dev，并且对Python有一些较小的知识，所以我将自己设置为通过Web App的设置的简单任务。

我遇到的问题是，我创建了一个部分，该部分向用户询问是/否问题。用户将单击相应的按钮。我还创建了一个上一个步骤按钮，以防用户意外选择错误的答案。以及返回菜单按钮。

通过矩阵移动仅显示一个部分，这很好。但是在某个时候，当您钻探并想返回一步或回到开始时，它显示了最后一步，这不是我想要的。单击“开始”将显示前两个部分/步骤。

我觉得这可能很简单，但我想在尝试调试时我想念它

如果用户单击“返回”

我想要什么

我得到什么

代码

i确保每个部分都有一个唯一的ID，并包含“ Back”和“ oft of Off Over”按钮。 I更新了JavaScript以处理导航历史记录，并确保只能看到当前步骤。我试图确保在显示上一个步骤或第一步之前，

prevStep

和startOver函数是否正确隐藏了当前步骤。

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';
}

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;
  /* Removed quotes */
  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;
}

<!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>
    <section id="stepBUSNo" style="display:none;">
      <h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
      <p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
      <button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.1Yes" style="display:none;">
      <h2>Change Cyclic Controller</h2>
      <p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
      <button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.2No" style="display:none;">
      <h2>Step 4.2: Change Pressure Switch</h2>
      <p>Change Pressure Switch. Does the system now turn on?</p>
      <button onclick="nextStep('step5.1Yes')">YES</button>
      <button onclick="nextStep('step5.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.1Yes" style="display:none;">
      <h2>Step 5.1: Pressure Switch Change</h2>
      <p>Pressure Switch was faulty. Discard.</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.2No" style="display:none;">
      <h2>Step 5.1: Wiring Or Relays</h2>
      <p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
      <button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>

您的CSS选择器，例如

section:not([style*="display: none"]

不起作用。依靠像这样的

display

属性不起作用 - 它不能反映DOM的当前计算状态。改为将类添加到您的元素中。

我还解决了一个问题，我注意到“启动”按钮不起作用的地方，因为它依赖于定义的变量来决定要执行哪个步骤。由于第一步始终是“ step1”，因此我现在已经对此进行了核对编码，因此您可能想在最后做一些不同的事情。 demo：

Answer 1

let historyStack = [];

function nextStep(stepId) {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    historyStack.push(currentStep.id);
    currentStep.classList.add("hidden");
  }
  document.getElementById(stepId).classList.remove("hidden");
}

function prevStep() {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    currentStep.classList.add("hidden");
  }
  const prevStepId = historyStack.pop();
  if (prevStepId) {
    document.getElementById(prevStepId).classList.remove("hidden");
  }
}

function startOver() {
  const currentStep = document.querySelector('section:not(.hidden)');
  if (currentStep) {
    currentStep.classList.add("hidden");
  }
  historyStack = [];
  document.getElementById("step1").classList.remove("hidden");
}

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

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;
  /* Removed quotes */
  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;
}

.hidden
{
  display:none;
}

<!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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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" class="hidden">
      <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>
    <section id="stepBUSNo" class="hidden">
      <h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
      <p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
      <button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.1Yes" class="hidden">
      <h2>Change Cyclic Controller</h2>
      <p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
      <button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step4.2No" class="hidden">
      <h2>Step 4.2: Change Pressure Switch</h2>
      <p>Change Pressure Switch. Does the system now turn on?</p>
      <button onclick="nextStep('step5.1Yes')">YES</button>
      <button onclick="nextStep('step5.2No')">NO</button>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver()">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.1Yes" class="hidden">
      <h2>Step 5.1: Pressure Switch Change</h2>
      <p>Pressure Switch was faulty. Discard.</p>
      <button onclick="prevStep()">Back</button>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
    <section id="step5.2No" class="hidden">
      <h2>Step 5.1: Wiring Or Relays</h2>
      <p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
      <button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
      <button onclick="prevStep()">Back</button>
      <p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
      <button onclick="startOver('step1')">Start Over</button>
      <button onclick="mainMenu()">Main Menu</button>
    </section>
  </main>

步骤通过矩阵问题，想返回Web App HTML的一个步骤，CSSJS

问题描述投票：0回答：1

1个回答

最新问题

步骤通过矩阵问题，想返回Web App HTML的一个步骤，CSSJS

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1