如何实现通过按钮切换Infoboard中的HTML页面？

Hey there! No worries about your English at all—let's figure this out together. You absolutely can add button-based navigation to switch between your Infoboard HTML pages, and I'll walk you through two straightforward, easy-to-implement solutions below.

Option 1: Use an iframe to Load External Pages #

This is perfect if your Infoboard pages are already separate HTML files and you don't want to rewrite too much code. The idea is to have a central container (an iframe) that loads different pages when you click buttons.

Example Code: #

<!-- Navigation Buttons -->
<div class="nav-buttons">
  <button onclick="loadPage('page1.html')">Page 1</button>
  <button onclick="loadPage('page2.html')">Page 2</button>
  <button onclick="loadPage('page3.html')">Page 3</button>
</div>

<!-- iframe Container for Pages -->
<iframe id="infoboard-frame" src="page1.html" width="100%" height="600px" frameborder="0"></iframe>

<script>
function loadPage(pageUrl) {
  const iframe = document.getElementById('infoboard-frame');
  iframe.src = pageUrl;
}
</script>

Notes: #

• Make sure all your HTML pages are in the same folder as the main page (or adjust the file paths in loadPage() correctly).
• You can style the buttons with CSS to make them match your Infoboard's design.

Option 2: Single-Page Toggle (No Page Refresh) #

If you prefer to keep all content on one page (to avoid loading delays), you can put each "page" content in a separate div and toggle which one is visible with buttons.

Example Code: #

<!-- Navigation Buttons -->
<div class="nav-buttons">
  <button onclick="showPage('page1')">Page 1</button>
  <button onclick="showPage('page2')">Page 2</button>
  <button onclick="showPage('page3')">Page 3</button>
</div>

<!-- Page Content Blocks -->
<div id="page1" class="infoboard-page" style="display: block;">
  <!-- Content for Page 1 goes here -->
  <h2>Infoboard Page 1</h2>
  <p>Your first page content...</p>
</div>

<div id="page2" class="infoboard-page" style="display: none;">
  <!-- Content for Page 2 goes here -->
  <h2>Infoboard Page 2</h2>
  <p>Your second page content...</p>
</div>

<div id="page3" class="infoboard-page" style="display: none;">
  <!-- Content for Page 3 goes here -->
  <h2>Infoboard Page 3</h2>
  <p>Your third page content...</p>
</div>

<script>
function showPage(pageId) {
  // Hide all pages first
  const allPages = document.querySelectorAll('.infoboard-page');
  allPages.forEach(page => {
    page.style.display = 'none';
  });
  // Show the selected page
  const selectedPage = document.getElementById(pageId);
  selectedPage.style.display = 'block';
}
</script>

Bonus: Add Active Button Styling #

To make it clearer which page is active, add a CSS class for selected buttons and update the script to toggle it:

.nav-buttons button.active {
  background-color: #4CAF50;
  color: white;
}

Update the showPage function:

function showPage(pageId) {
  // Hide all pages
  const allPages = document.querySelectorAll('.infoboard-page');
  allPages.forEach(page => {
    page.style.display = 'none';
  });
  // Show selected page
  document.getElementById(pageId).style.display = 'block';
  
  // Update active button
  const allButtons = document.querySelectorAll('.nav-buttons button');
  allButtons.forEach(btn => {
    btn.classList.remove('active');
  });
  event.target.classList.add('active');
}

Both options work great—pick the one that fits your existing setup best. Let me know if you need help adapting this to your specific Infoboard!

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