?????????Tabs控件其實是一個容器控件TabContainer和面板控件TabPanel。TabContainer控件用于包含TabPanel。TabPanel控件用于顯示。

下面來看一個示例：

1)在VS2005中新建一個ASP.NET AJAX-Enabled Web Project項目工程，命名為Tabs。

2)在Default.aspx頁面上添加一個TabContainer控件，同時在該容器控件中添加兩個TabPanel。分別命名為TabPanel1和TabPanel2，同時設置HeaderText為Account和Email。

代碼如下：
?1????????<cc1:tabcontainer?id="TabContainer1"?runat="server"?Height="200px"?Width="300px"?OnClientActiveTabChanged="ActiveTabChanged">
?2????????????<cc1:TabPanel?ID="TabPanel1"?runat="server"?HeaderText="Account">
?3????????????????<ContentTemplate>
?4????????????????????<asp:Label?ID="Label1"?runat="server"?Text="name"></asp:Label>
?5????????????????????&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox?ID="txtName"?runat="server"></asp:TextBox><br?/>
?6????????????????????<asp:Label?ID="Label2"?runat="server"?Text="password"></asp:Label>
?7????????????????????<asp:TextBox?ID="txtPassword"?runat="server"?TextMode="Password"></asp:TextBox><br?/><br?/>
?8????????????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server">
?9????????????????????????<ContentTemplate>
10????????????????????????????<asp:Button?ID="Button1"?runat="server"?Text="Button"?OnClick="GetUserInfo"?/>
11????????????????????????????<asp:Label?ID="NamePassword"?runat="server"?Text=""></asp:Label>
12????????????????????????</ContentTemplate>
13????????????????????</asp:UpdatePanel>
14????????????????</ContentTemplate>?????
15????????????</cc1:TabPanel>
16????????????<cc1:TabPanel?ID="TabPanel2"?runat="server"?HeaderText="E-Mail">
17????????????????<ContentTemplate>
18????????????????????<asp:Label?ID="Label3"?runat="server"?Text="Email"></asp:Label>
19????????????????????<asp:TextBox?ID="TextBox1"?runat="server"></asp:TextBox><br?/><br?/>
20????????????????????<asp:Button?ID="Button2"?runat="server"?Text="Button"?OnClientClick="GetEmail"?/>
21????????????????</ContentTemplate>
22????????????</cc1:TabPanel>
23????????</cc1:tabcontainer>
屬性說明：

?????????OnClientActiveTabChanged：在客戶端對當前激活的Tab進行改變時執行的事件腳本。
?????????HeaderText：在TabContainer中的每個Tab的標題內容。

3)在頁面上添加ActiveTabChanged事件函數，用于顯示。

代碼如下：
1????????function?ActiveTabChanged(sender,eventArgs)
2????????{
3????????????var?currentTab=$get('CurrentTab');
4????????????currentTab.innerHTML="你選擇的Tab為"?+?sender.get_activeTab().get_headerText();
5????????}

4)在TabContainer下面拖放一個Label，命名為CurrentTab。用于顯示當前激活的Tab。

代碼如下：
????????<asp:Label?ID="CurrentTab"?runat="server"?Text=""></asp:Label>
4)按下CTRL+F5,在瀏覽器里查看效果。

效果圖如下：

轉載于:https://www.cnblogs.com/qc1984326/archive/2007/03/22/684589.html

總結

以上是生活随笔為你收集整理的AJAX ControlToolkit学习日志-Tabs(27)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。