Lib: 2011/10

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>anchor test with tab design</title>
    <style type="text/css">
        ul.tab
        {
            margin: 1px 0px;
            padding: 0px;
        }
        ul.tab li
        {
            display: inline;
        }
        ul.tab li a
        {
            padding: 3px;
            margin-right: 2px;
            background-color: #eee;
            border: 1px outset gray;
            font-size: small;
            color: Blue;
        }
        ul.tab li a:hover
        {
            background-color: gold;
        }
        ul.tab li a.active_tab
        {
            background-color: Orange;
        }
        
        div.tab_container
        {
            border: 1px solid gray;
            padding: 10px;
        }
        
        a
        {
            text-decoration: none;
        }
        a:hover
        {
            text-decoration: underline;
        }
    </style>
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function tab_change() {
            // 頁籤序號
            var index = location.hash.substring(1);
            if (!index) index = '0';
            index = parseInt(index);
 
            // 變更頁籤css
            $('ul.tab li a').removeClass('active_tab').eq(index).addClass('active_tab');
 
            // postback, 以觸發update panel更新
            //$('<%=hdnTabIndex.ClientID%>').val(index);
            __doPostBack('hdnTabIndex', index);
        }
        $(function () {
            // 頁籤變更觸發
            $(window).bind('hashchange', tab_change);
            // 載入頁面時更新
            tab_change();
        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="smPage" runat="server">
    </asp:ScriptManager>
    <ul class="tab">
        <li><a href="#0" class="active_tab">第一頁</a></li>
        <li><a href="#1">第二頁</a></li>
        <li><a href="#2">第三頁</a></li>
        <li><a href="#3">第四頁</a></li>
        <li><a href="#4">第五頁</a></li>
    </ul>
    <div class="tab_container">
        <asp:UpdatePanel ID="upTabContainer" runat="server" UpdateMode="Conditional" RenderMode="Block">
            <ContentTemplate>
                <asp:HiddenField ID="hdnTabIndex" runat="server" />
                <asp:Panel ID="plTabContainer0" runat="server" Visible="false">
                    第一頁內容
                </asp:Panel>
                <asp:Panel ID="plTabContainer1" runat="server" Visible="false">
                    第二頁內容
                </asp:Panel>
                <asp:Panel ID="plTabContainer2" runat="server" Visible="false">
                    第三頁內容
                </asp:Panel>
                <asp:Panel ID="plTabContainer3" runat="server" Visible="false">
                    第四頁內容
                </asp:Panel>
                <asp:Panel ID="plTabContainer4" runat="server" Visible="false">
                    第五頁內容
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Tab_Load();
        }
 
        protected void Tab_Load()
        {
            // postback參數
            string _index = Request.Form["__EVENTARGUMENT"];
            if (string.IsNullOrEmpty(_index)) _index = "0";
 
            plTabContainer0.Visible = false;
            plTabContainer1.Visible = false;
            plTabContainer2.Visible = false;
            plTabContainer3.Visible = false;
            plTabContainer4.Visible = false;
            upTabContainer.FindControl("plTabContainer" + _index).Visible = true;
        }
    }
}