如何实现Tab标签效果,其中,每一个标签的内容都是动态加载的.

Question

如题,想实现一个标签效果,每个标签的内容都是从数据库中获取,我试过别人写好的滑动门和Tab标签特效果,每一块的内容都是一个数据控件,数据绑定在页面加载时执行,但这样做,只能加载一个控件.
  请问怎们实现动态内容的Tab标签效果,或者是滑动门效果.

Answer 1

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Head.ascx.cs" Inherits="UserControl_Head" %>
<script type="text/javascript">
    function nTabs(thisObj, Num) 
    {
    //if (thisObj.className == "active")
       // return;
    if (Num == "0")
        location.href = "../Train/index.aspx";
    else if (Num == "1")
        location.href = "../download/index.aspx";
    else if (Num == "2")
        location.href = "../download/download.aspx?mod=m4";
    else if (Num == "3")
        location.href = "../Bbs/index.aspx";
    else if (Num == "4")
        location.href = "../SoftCentral/softCentral.aspx";
    var tabObj = thisObj.parentNode.id; 
    var tabList = document.getElementById(tabObj).getElementsByTagName("li");
    for (i = 0; i < tabList.length; i++)
    {
        if (i == Num)
        { 
            thisObj.className = "active"; 
            document.getElementById(tabObj+"_Content"+i).style.display = "block";
        }
        else
        { 
            tabList[i].className = "normal"; 
            document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
        } 
    }
}
function $$(id) {
    return document.getElementById(id);
} 
</script> 
<div class="top" style="height:50px;">
    <div class="top_img">
        <asp:Image runat="server" ID="imageTitle" ImageUrl="~/images/top_02.gif" />
    </div>
</div>
<div class="nTab"  style="width:998px;float:left;height:auto"> 
         <div style="width:140px;height:75px;float:left;">
             <asp:Image runat="server" ID="image1" ImageUrl="~/images/logo.gif"  />
         </div>
         <div style="text-align:right">
            <asp:Label runat="server" ID="labUserName"></asp:Label> 欢迎光临博软培训网站
            <asp:LinkButton runat="server" ID="UserManager" Text="[个人中心]" PostBackUrl="~/PresonManagement/PersonInformation.aspx"></asp:LinkButton>
            <asp:LinkButton runat="server" ID="LinkButton4" PostBackUrl="~/user/UserSelectClass.aspx" Text="[您已经报名的课程]"></asp:LinkButton>
            <asp:LinkButton runat="server" ID="zhuxiao" Text="[注销]" onclick="zhuxiao_Click"></asp:LinkButton> 
            <asp:Label runat="server" ID="Label1"></asp:Label>
         </div>
        <!-- 标题开始 --> 
        <div class="TabTitle" style="margin-top:30px;"> 
            <ul id="myTab0"> 
        <li class='<%= Index==4?"active":"normal" %>' onclick="nTabs(this,4);">软件中心</li> 
        <li class='<%= Index==0?"active":"normal" %>' onclick="nTabs(this,0);">培训中心</li> 
        <li class='<%= Index==1?"active":"normal" %>' onclick="nTabs(this,1);">下载中心</li> 
        <li class='<%= Index==2?"active":"normal" %>' onclick="nTabs(this,2);">技术文章</li> 
        <li class='<%= Index==3?"active":"normal" %>' onclick="nTabs(this,3);">疑难解答</li> 
        
        </ul> 
        </div> 
        <!-- 内容开始 --> 
        <div class="TabContent" > 
            <div id="myTab0_Content0" class='<%= Index==0?"":"none" %>'>
        <div class="TabContent_link"  >
        <asp:Repeater runat="server" ID="p0">
            <ItemTemplate>
            <a href='../Train/Train_ClassList.aspx?id=<%#Eval("课程类别编码") %>'><%#Eval("课程类别名称")%></a>　|　
            </ItemTemplate>
        </asp:Repeater>
        <a  href="../Train/Train_ClassList.aspx" onmouseover="$$('more').className=''"  >更多...</a>
       
        <div style="width:130px;height:auto;background-color:White;position:absolute;left:782px;top:157px;" class="none"  id="more" onmouseover="this.className=''" onmouseout="this.className='none'" >
            <asp:Repeater runat="server" ID="moreList">
                <ItemTemplate>
                    <p style="border-bottom:dashed 1px #c0c0c0;padding-left:15px;"> <a href='../Train/Train_ClassList.aspx?id=<%#Eval("课程类别编码") %>'><%#Eval("课程类别名称")%></a></p>
                </ItemTemplate>
            </asp:Repeater>
        </div>
       
        <br />
        </div>
        </div>             <div id="myTab0_Content1" class='<%= Index==1?"":"none" %>'>
        <div class="TabContent_link">
        <asp:Repeater runat="server" ID="p1">
            <ItemTemplate>
               <a href='<%#Eval("编码") %>'><%#Eval("名称")%></a>　|　
            </ItemTemplate>
        </asp:Repeater>
        </div>
        </div>             <div id="myTab0_Content2" class='<%= Index==2?"":"none" %>'>
        <div class="TabContent_link">
        <asp:Repeater runat="server" ID="p2">
            <ItemTemplate>
                <a href='download.aspx?mod=m4&id=<%#Eval("课程类别编码") %>'><%#Eval("课程类别名称")%></a>　|　
            </ItemTemplate>
        </asp:Repeater>
         <a  href="../Train/Train_ClassList.aspx" onmouseover="$$('moreTC').className=''"  >更多...</a>
         <div style="width:130px;height:auto;background-color:White;position:absolute;left:782px;top:157px;" class="none"  id="moreTC" onmouseover="this.className=''" onmouseout="this.className='none'" >
            <asp:Repeater runat="server" ID="Repeater1">
                <ItemTemplate>
                    <p style="border-bottom:dashed 1px #c0c0c0;padding-left:15px;">
                     <a href='download.aspx?mod=m4&id=<%#Eval("课程类别编码") %>'><%#Eval("课程类别名称")%></a>
                     </p>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        </div>
        </div>            <div id="myTab0_Content3" class='<%= Index==3?"":"none" %>'>
        <div class="TabContent_link">
        <asp:Repeater runat="server" ID="p3">
                <ItemTemplate>
                    <a href='themeList.aspx?id=<%#Eval("版块分类编码") %>'><%#Eval("版块分类名称")%></a>　|　
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
            <div id="myTab0_Content4" class='<%= Index==4?"":"none" %>'>
            <div class="TabContent_link">
            <a href="../TailorExploit/index.aspx" style="font-weight:bold;color:#000000;text-decoration:underline">定制开发</a>
                <asp:Repeater runat="server" ID="p4">
                    <ItemTemplate>
                        <a href='../SoftCentral/softInfo.aspx?id=<%#Eval("产品编码") %>'><%#Eval("产品简称") %></a>　|　
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            </div>
        </div>
</div>
    
protected void tabLoad()
    {
        p0.DataSource = DbHelperSQL.Query("select top 10 * from ERP_ClassTypeCode where len(课程类别编码)=3");
        p0.DataBind();        p1.DataSource = DbHelperSQL.Query("select * from xt_tc_downloadCenter");
        p1.DataBind();        p2.DataSource = DbHelperSQL.Query("select top 10 * from erp_classtypecode where len(课程类别编码)=3");
        p2.DataBind();        p3.DataSource = DbHelperSQL.Query("select * from xt_tc_issuesort ");
        p3.DataBind();        p4.DataSource = DbHelperSQL.Query("select * from xt_tc_Product");
        p4.DataBind();
        moreLoad();
    }

Answer 2

 public int Index// 0,1,2,3
    {
        get;
        set;
    }