单页Web应用层级回退修复及<li>标签图片显隐控制需求

Let's break down how to fix both the broken breadcrumb back navigation and implement the <li> click functionality to toggle image visibility correctly.

1. Fixing Breadcrumb Back Navigation #

The main issues here were:

• Incorrect HTML structure for breadcrumb <li> elements (the <a> tag was improperly nested in some items)
• Missing click handlers to trigger step navigation and reset the UI to the corresponding level

Here's what we did to fix it:

• Corrected the breadcrumb HTML to properly nest <a> inside <li>
• Added click handlers for each breadcrumb item that resets the UI to the selected step, shows/hides relevant button groups, and updates the breadcrumb's current active class

2. Implementing <li> Click to Toggle Image Visibility #

We needed to ensure clicking a breadcrumb <li> (or its link) triggers the right UI state:

• For each step (Start → Material → Kilos → Result), show the corresponding button groups and hide all others
• Reset any previously hidden images/buttons when navigating back to a higher level
• Track the last selected material to ensure the Kilos step shows the correct weight options when navigating back

Modified Complete Code #

<button class="pulse-button" style="color: red;"> START </button> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> 
  $( ".pulse-button" ).click(function() { 
    $(this).hide(); 
    $("#naviBar").show();
    $(".btn-group").show();
    resetAllSteps();
  }); 

  // Reset all button groups to hidden state
  function resetAllSteps() {
    $(".plaster-kilo-btn-group, .material-plaster-kilo-btn-group, .brick-kilo-btn-group, .material-brick-kilo-btn-group, .material-CONCRETE-kilo-btn-group, .material-AECONCRETE-kilo-btn-group, .material-AECONCRETE-Anchros-btn-group").hide();
    $("#videoTeliko").hide();
    // Hide all product buttons by default
    $(".material-plaster-kilo-btn-group button, .material-brick-kilo-btn-group button, .material-AECONCRETE-Anchros-btn-group button").hide();
  }

  // Breadcrumb navigation handlers
  $("#startID a").click(function(e) {
    e.preventDefault();
    $(".pulse-button").show();
    $("#naviBar").hide();
    $(".btn-group").hide();
    resetAllSteps();
    // Update breadcrumb active state
    $(".cd-breadcrumb li a").removeClass("current");
    $("#materialID a").addClass("current");
  });

  $("#materialID a").click(function(e) {
    e.preventDefault();
    resetAllSteps();
    $(".btn-group").show();
    // Update breadcrumb active state
    $(".cd-breadcrumb li a").removeClass("current");
    $(this).addClass("current");
  });

  $("#kilosID a").click(function(e) {
    e.preventDefault();
    resetAllSteps();
    // Show relevant kilo groups based on last selected material
    if(window.lastMaterial === "plaster") {
      $(".plaster-kilo-btn-group").show();
    } else if(window.lastMaterial === "brick") {
      $(".brick-kilo-btn-group").show();
    } else if(window.lastMaterial === "concrete") {
      $(".material-CONCRETE-kilo-btn-group").show();
    } else if(window.lastMaterial === "aerate") {
      $(".material-AECONCRETE-kilo-btn-group").show();
    }
    // Update breadcrumb active state
    $(".cd-breadcrumb li a").removeClass("current");
    $(this).addClass("current");
  });

  $("#resultID a").click(function(e) {
    e.preventDefault();
    $("#videoTeliko").show();
    // Update breadcrumb active state
    $(".cd-breadcrumb li a").removeClass("current");
    $(this).addClass("current");
  });

  /*MATERIAL BUTTON HANDLERS*/
  $( "#plasterBoard" ).click(function() { 
    $(".btn-group").hide(); 
    $(".plaster-kilo-btn-group").show();
    window.lastMaterial = "plaster";
    // Update breadcrumb to Kilos step
    $(".cd-breadcrumb li a").removeClass("current");
    $("#kilosID a").addClass("current");
  }); 

  $( "#brickImage" ).click(function() { 
    $(".btn-group").hide(); 
    $(".brick-kilo-btn-group").show();
    window.lastMaterial = "brick";
    $(".cd-breadcrumb li a").removeClass("current");
    $("#kilosID a").addClass("current");
  }); 

  $( "#concreteStone" ).click(function() { 
    $(".btn-group").hide(); 
    $(".material-CONCRETE-kilo-btn-group").show();
    window.lastMaterial = "concrete";
    $(".cd-breadcrumb li a").removeClass("current");
    $("#kilosID a").addClass("current");
  }); 

  $( "#aerateConcrete" ).click(function() { 
    $(".btn-group").hide(); 
    $(".material-AECONCRETE-kilo-btn-group").show();
    window.lastMaterial = "aerate";
    $(".cd-breadcrumb li a").removeClass("current");
    $("#kilosID a").addClass("current");
  }); 

  //Plaster Board Weight & Product Script
  $("#tenKilo").click(function(){ 
    $(".plaster-kilo-btn-group").hide(); 
    $(".material-plaster-kilo-btn-group").show();
    $("#pictureHook").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#twentyFive").click(function(){ 
    $(".plaster-kilo-btn-group").hide(); 
    $(".material-plaster-kilo-btn-group").show();
    $("#nylonMetalDrive").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#oneHundred").click(function(){ 
    $(".plaster-kilo-btn-group").hide(); 
    $(".material-plaster-kilo-btn-group").show();
    $("#zipToogle").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#hundredFifty").click(function(){ 
    $(".plaster-kilo-btn-group").hide(); 
    $(".material-plaster-kilo-btn-group").show();
    $("#strapToogle").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#pictureHook").click(function(){ $("#videoTeliko").show(); });

  //Brick Weight & Product Script
  $("#BrickTwentyFive").click(function(){ 
    $(".brick-kilo-btn-group").hide(); 
    $(".material-brick-kilo-btn-group").show();
    $("#nylonPlugEightMM").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#Brickfifty").click(function(){ 
    $(".brick-kilo-btn-group").hide(); 
    $(".material-brick-kilo-btn-group").show();
    $("#nylonPlugSixMM").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#BrickOneHundred").click(function(){ 
    $(".brick-kilo-btn-group").hide(); 
    $(".material-brick-kilo-btn-group").show();
    $("#nylonPlugEightMM").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  //CONCRETE Weight Script
  $("#ConcreteFifty").click(function(){ 
    $(".material-CONCRETE-kilo-btn-group").hide(); 
    // Add your concrete product display logic here
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  //AERATE CONCRETE Weight & Product Script
  $("#AEConcreteFifty").click(function(){ 
    $(".material-AECONCRETE-kilo-btn-group").hide(); 
    $(".material-AECONCRETE-Anchros-btn-group").show();
    $("#metalPlugsAE").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 

  $("#AEConcreteHundred").click(function(){ 
    $(".material-AECONCRETE-kilo-btn-group").hide(); 
    $(".material-AECONCRETE-Anchros-btn-group").show();
    $("#zincAlloy").show();
    $(".cd-breadcrumb li a").removeClass("current");
    $("#resultID a").addClass("current");
  }); 
</script> 

<!--MATERIALS GROUP--> 
<nav id="naviBar" style="margin-left: 350px; display: none;"> 
  <ol class="cd-breadcrumb triangle custom-icons"> 
    <li id="startID"><a href="#start">Start</a></li> 
    <li id="materialID"><a href="#materials" class="current"><em>Material</em></a></li> 
    <li id="kilosID"><a href="#kilos">Kilos</a></li> 
    <li id="resultID"><a href="#result">Result</a></li> 
  </ol> 
</nav> 

<section class="btn-group" style="display: none;"> 
  <button id="plasterBoard">Plaster board</button> 
  <button id="brickImage">Brick</button> 
  <button id="concreteStone">Concrete &amp; Stone</button> 
  <button id="aerateConcrete">Aerate Concrete</button> 
</section> 

<!-- KILO BUTTONS DEFININGS--> 
<div class="plaster-kilo-btn-group" style="display: none;"> 
  <button align="center" id="tenKilo" >10 kilo</button> 
  <button align="center" id="twentyFive" >25 Kilo</button> 
  <button align="center" id="oneHundred">100 kilo</button> 
  <button align="center" id="hundredFifty">150 kilo</button> 
</div> 

<!-- PLASTER BOARD ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="material-plaster-kilo-btn-group" style="display: none;"> 
  <button align="center" id="pictureHook" >Picture Screw</button> 
  <button align="center" id="nylonMetalDrive" >Nylon and Metal</button> 
  <button align="center" id="zipToogle" >Zip Toogle</button> 
  <button align="center" id="strapToogle" >Strap Toogle</button> 
</div> 

<!-- BRICK ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="brick-kilo-btn-group" style="display: none;"> 
  <button align="center" id="BrickTwentyFive">25 Kilo</button> 
  <button align="center" id="Brickfifty">50 kilo</button> 
  <button align="center" id="BrickOneHundred">100 kilo</button> 
</div> 

<!-- BRICK ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="material-brick-kilo-btn-group" style="display: none;"> 
  <button align="center" id="nylonPlugSixMM" style="color: white;" >Nylon 655mm Plug </button> 
  <button align="center" id="nylonPlugEightMM" style="color: white" >Nylon 58mm Plug </button> 
  <button align="center" id="nylonPlugTENMM" >Nylon 10mm Plug </button> 
</div> 

<!-- CONCRETE ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="material-CONCRETE-kilo-btn-group" style="display: none;"> 
  <button align="center" id="ConcreteFifty">50 kilo</button> 
</div> 

<!-- AERATE CONCRETE ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="material-AECONCRETE-kilo-btn-group" style="display: none;"> 
  <button align="center" id="AEConcreteFifty">50 kilo</button> 
  <button align="center" id="AEConcreteHundred">100 kilo</button> 
</div> 

<!-- AERATE CONCRETE ANCHORS SCREW PER KILO BUTTONS DEFININGS--> 
<div class="material-AECONCRETE-Anchros-btn-group" style="display: none;"> 
  <button align="center" id="metalPlugsAE" >Nylon 8mm Plug </button> 
  <button align="center" id="zincAlloy" >Nylon 10mm Plug </button> 
</div>

<!-- Assuming videoTeliko is your result display element -->
<div id="videoTeliko" style="display: none;">
  <!-- Your result content (images/videos) goes here -->
</div>

Key Improvements Made: #

• Fixed Breadcrumb Structure: Corrected nested <a> tags and added functional back navigation handlers
• Step Tracking: Added window.lastMaterial to remember user selections, ensuring breadcrumb navigation returns to the correct state
• Consistent UI State: Used jQuery's show()/hide() for cleaner state management, plus a resetAllSteps() function to reset the UI when navigating back
• Dynamic Active Class: Updated the breadcrumb's current class automatically as users move through steps
• Organized Code: Grouped related handlers together for better readability and maintainability

内容的提问来源于stack exchange，提问作者Rafail Efstathiou