点击不同图片在同一位置切换显示对应表单的技术实现问询

Hey there! I’ve got a smooth, no-page-reload solution for you using vanilla HTML, CSS, and JavaScript—no more relying on URL parameters or refreshing the page. Let’s break this down step by step:

This approach keeps all forms in the exact same position and swaps their visibility instantly when clicking the corresponding image.

Step 1: Set Up the HTML Structure #

We’ll create image triggers (each linked to a form via a data-target attribute) and a container to hold all forms (so they share the same space):

<!-- Image Triggers -->
<div class="image-triggers">
  <img src="path/to/image1.jpg" alt="Image 1" class="trigger-img" data-target="#form1">
  <img src="path/to/image2.jpg" alt="Image 2" class="trigger-img" data-target="#form2">
  <img src="path/to/image3.jpg" alt="Image 3" class="trigger-img" data-target="#form3">
</div>

<!-- Shared Form Container -->
<div class="form-container">
  <form id="form1" class="form active">
    <h3>Form 1</h3>
    <input type="text" placeholder="Enter text for Form 1">
    <button type="submit">Submit Form 1</button>
  </form>
  
  <form id="form2" class="form">
    <h3>Form 2</h3>
    <input type="email" placeholder="Enter email for Form 2">
    <button type="submit">Submit Form 2</button>
  </form>
  
  <form id="form3" class="form">
    <h3>Form 3</h3>
    <textarea placeholder="Enter message for Form 3"></textarea>
    <button type="submit">Submit Form 3</button>
  </form>
</div>

Step 2: Style with CSS #

We’ll use CSS to ensure all forms occupy the same space and are hidden by default (except the first one, marked with the active class):

/* Style image triggers (customize as needed) */
.image-triggers img {
  cursor: pointer;
  margin: 0 15px;
  transition: opacity 0.2s ease;
}
.image-triggers img:hover {
  opacity: 0.8;
}

/* Form container: ensures all forms stack in the same spot */
.form-container {
  margin-top: 25px;
  position: relative;
  min-height: 280px; /* Adjust based on your form's height */
}

/* Hide all forms by default */
.form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

/* Show the form with the 'active' class */
.form.active {
  display: block;
}

Step 3: Add JavaScript for Click Handling #

This script listens for clicks on the images, then toggles the active class to show/hide the correct form:

// Grab all image triggers
const triggerImages = document.querySelectorAll('.trigger-img');

// Attach click event to each image
triggerImages.forEach(img => {
  img.addEventListener('click', () => {
    // Get the target form ID from the image's data attribute
    const targetFormSelector = img.getAttribute('data-target');
    
    // Hide all forms by removing the 'active' class
    document.querySelectorAll('.form').forEach(form => {
      form.classList.remove('active');
    });
    
    // Show the target form by adding the 'active' class
    document.querySelector(targetFormSelector).classList.add('active');
  });
});

Why This Works: #

• No page reload: All changes happen instantly in the browser
• Same position for forms: The position: absolute on forms makes them stack on top of each other in the container
• Easy to maintain: The data-target attribute links images to forms directly—add more images/forms later without rewriting core JS
• Smooth user experience: No jarring page refreshes, just instant form swaps

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