網頁頭尾固定中間隨導航變換：Tab 切換與 SPA 兩種主流方案

需求：頂部導航欄、底部版權固定，點擊導航/二級菜單切換中間內容區。

方案一：原生 Tab 切換 (無路由、SEO 弱)

<header>固定導航</header>
<nav id="tabs">
  <button data-tab="home" class="active">首頁</button>
  <button data-tab="about">關於</button>
</nav>
<main>
  <section id="home" class="tab-panel active">首頁內容</section>
  <section id="about" class="tab-panel">關於內容</section>
</main>
<footer>版權</footer>

<style>
.tab-panel { display:none; } .tab-panel.active { display:block; }
</style>
<script>
document.querySelectorAll('#tabs button').forEach(btn => btn.onclick = () => {
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('#tabs button').forEach(b => b.classList.remove('active'));
    document.getElementById(btn.dataset.tab).classList.add('active');
    btn.classList.add('active');
});
</script>

方案二：單頁應用 (SPA) + 前端路由 (推薦)

• 使用 Vue Router、React Router、Angular Router。
• 佈局組件包含 <header>、<router-view>、<footer>。
• 路由表對應各頁面組件，導航欄 <router-link> 切換。
• 支援瀏覽器前進/後退、深層連結、SEO (配合 SSR/SSG)。

方案三：iframe (不推薦)

<iframe src="page1.html" name="content"> + 導航 target="content"。缺點：跨域受限、SEO 差、滾動條巢狀、通訊複雜。

選型建議

• 靜態內容少、無 SEO 需求 → 方案一最輕量。
• 內容豐富、需 SEO、團隊有前端框架經驗 → 方案二標準做法。
• 嵌入第三方系統/舊專案 → 方案三權宜之計。