ASP.NET 複合控件與母版頁實戰 (二)：JavaScript 實作分頁籤 (Tab) 效果

前言

母版頁提供版面一致性，複合控件封裝可重用 UI 邏輯。本文示範純前端 JavaScript + CSS 實作分頁籤效果，無需伺服器端控件，輕量且相容性佳。

完整頁面程式碼 (JavaScriptMenu.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptMenu.aspx.cs" Inherits="JavaScriptMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
  <title>JavaScript 實現的選項卡式效果</title>
  <script type="text/javascript">
    function Show_Sub(id_num, num, obj) {
      for (var i = 0; i <= 9; i++) {
        var tab = document.getElementById("tabb" + id_num + i);
        var sub = document.getElementById("subb" + id_num + i);
        if (tab) tab.className = 'guide2';
        if (sub) sub.style.display = 'none';
      }
      var curTab = document.getElementById("tabb" + id_num + num);
      var curSub = document.getElementById("subb" + id_num + num);
      if (curTab) curTab.className = 'guide1';
      if (curSub) curSub.style.display = 'block';
    }

    function GetObj(objName) {
      return document.getElementById(objName) || document.all[objName];
    }
  </script>
  <style type="text/css">
    .guide1 { cursor:pointer; color:#003399; background:#3399FF; font-weight:bold; border-right:1px solid #A2C0FE; height:25px; line-height:25px; }
    .guide2 { cursor:pointer; border-right:1px solid #A2C0FE; line-height:25px; }
    .pad5 { padding:5px; } .t { border-top:1px solid #A2C0FE; }
    .b { border-bottom:1px solid #A2C0FE; } .l { border-left:1px solid #A2C0FE; }
    .r { border-right:1px solid #A2C0FE; }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <%= GetUserPanel(0) %>
    </div>
  </form>
</body>
</html>

後台程式碼 (JavaScriptMenu.aspx.cs) - 動態產生分頁籤 HTML

public partial class JavaScriptMenu : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) { }

    protected string GetUserPanel(int id_num)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("");

        // 頁籤標題列
        for (int i = 0; i < 5; i++)
        {
            string cls = (i == 0) ? "guide1" : "guide2";
            sb.Append($"");
        }
        sb.Append("
頁籤 {i+1}
");

        // 內容區塊
        for (int i = 0; i < 5; i++)
        {
            string display = (i == 0) ? "block" : "none";
            sb.Append($"
");
            sb.Append($"
頁籤 {i+1} 內容區塊
");
            sb.Append("
這裡可以放置任何伺服器控件、User Control 或靜態 HTML。
");
            sb.Append("
");
        }
        sb.Append("
");
        return sb.ToString();
    }
}

關鍵技術點解析

1. CSS 類別切換：`guide1` (啟用) / `guide2` (非啟用) 控制視覺狀態。
2. 顯示/隱藏：`style.display = 'block' | 'none'` 切換內容區塊。
3. 相容性取得元素：`GetObj` 同時支援 `document.getElementById` (標準) 與 `document.all` (IE 舊版)。
4. 伺服器端動態產生：`GetUserPanel` 方法依資料動態輸出頁籤與內容 HTML，彈性極高。

進階擴充建議

• 將分頁籤封裝為 **User Control** (`.ascx`)，暴露 `Tabs` 集合屬性，支援資料繫結。
• 搭配 **UpdatePanel** 實現無刷新切換 (內容區塊採用 AJAX 載入)。
• 整合 **jQuery UI Tabs** 或 **Bootstrap Navs** 取代手寫 JS，獲得無障礙支援、鍵盤導航、動畫效果。
• 母版頁中定義 `ContentPlaceHolder` 對應分頁籤容器，各內容頁只需提供頁籤資料。

總結

純前端 JS+CSS 實作分頁籤簡單高效，配合伺服器端動態產生 HTML，可滿足大多數 Tab UI 需求。若專案已引入前端框架，建議改用框架元件以獲得更完整的互動體驗與無障礙支援。