JavaScript与TailwindCSS：如何实现按钮与iframe横向并排及iframe切换显示功能

Let's break down how to fix your layout and add the interactive toggle behavior you need:

1. Updated HTML Structure #

First, we'll adjust the HTML to separate buttons and iframes into dedicated containers for horizontal alignment:

<div class="flex flex-row justify-center my-4"> 
  <div class="relative w-full flex flex-row mr-1" id="div-header-overplot"> 
    <!-- Buttons container (horizontal layout) -->
    <div class="flex flex-row flex-wrap gap-2 items-center" id="buttons-container"></div>
    <!-- Iframes container (takes remaining space) -->
    <div class="flex-1 ml-2" id="iframes-container"></div>
  </div> 
</div>

• Changed the parent container from flex-col to flex-row to place buttons and iframes side by side
• Added a dedicated container for buttons (uses flex-row to arrange buttons horizontally)
• Used flex-1 on the iframes container to make it expand to fill available space

2. Revised JavaScript Code #

This code handles creating elements, setting initial visibility, and adding the toggle interaction:

// Get references to our new containers
const buttonsContainer = document.getElementById('buttons-container');
const iframesContainer = document.getElementById('iframes-container');

// Assume these are defined elsewhere in your code
const spectra_list = []; // Your list of iframe sources
const colors = []; // Your button color array

function createIframes() { 
  // Store all buttons and iframes for easy access
  const allButtons = [];
  const allIframes = [];

  for (let i = 0; i < spectra_list.length; i++) { 
    let button = document.createElement("button"); 
    let iframe = document.createElement("iframe"); 

    // Configure button
    button.innerText = "Spectre " + (i+1); 
    button.style.backgroundColor = colors[i]; 
    // Cleaned Tailwind classes (removed invalid "display:inline-block")
    button.classList.add("h-10", "py-1", "px-4", "text-xl", "text-gray-100", "font-medium", "transition-colors", "hover:text-gray-900", "focus:outline-none", "rounded");
    // Highlight first button by default
    if (i === 0) button.classList.add("ring-2", "ring-white");

    // Configure iframe
    iframe.classList.add("h-full", "w-full", "border-gray-400", "rounded", "bg-gray-50");
    iframe.src = spectra_list[i]; // Set your iframe source here
    // Hide all iframes except the first one
    iframe.style.display = i === 0 ? "block" : "none";

    // Append elements to their containers
    buttonsContainer.appendChild(button); 
    iframesContainer.appendChild(iframe); 

    // Store references for toggle logic
    allButtons.push(button);
    allIframes.push(iframe);

    // Add click event handler
    button.addEventListener("click", function (){ 
      // Hide all iframes
      allIframes.forEach(frame => frame.style.display = "none");
      // Show corresponding iframe
      allIframes[i].style.display = "block";
      // Remove active state from all buttons
      allButtons.forEach(btn => btn.classList.remove("ring-2", "ring-white"));
      // Add active state to clicked button
      this.classList.add("ring-2", "ring-white");
    });
  }
}

// Initialize the elements
createIframes();

Key Changes Explained #

Layout Fixes: #

• Buttons are now arranged horizontally in their container using flex-row
• Iframes occupy all remaining space next to the buttons (thanks to flex-1)
• Removed invalid Tailwind classes like display:inline-block (flex handles layout automatically)

Interactive Toggle: #

• Stores all buttons and iframes in arrays to easily manage visibility and states
• By default, the first iframe is visible and its button is highlighted
• On button click:
  1. Hides all iframes
  2. Shows the iframe linked to the clicked button
  3. Updates button styling to indicate which one is active (customize the ring-2/ring-white classes to match your design)

You can adjust the styling (button size, active state appearance, spacing) by modifying the Tailwind classes or adding custom CSS as needed.

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