功能：
????將需要將頁面中多個具備類似性質或功能的控件歸納為同一組的時候，可以使用"索引標簽"來進行分類。這些分類的標簽將被包含在同一個"索引標簽容器"(TabContainer)中。

屬性(TabContainer)：
????ActiveTabChanged :當我們單擊索引標簽時，并不會真正引發回送或回調動作，直到頁面進行下一次的回送時，
????????? 才會執行定義在這個事件處理函數內的程序代碼。
????????? 一般來說，我們會將這個事件設置為UpdatePane控件之AsyncPostBackTrigger類型觸發器的控件事件。
????OnClientActiveTabChanged：當作用索引標簽改變，并在客戶端觸發tabChanged事件時，所要執行的javascript程序代碼。
????OnActiveTabChanged:指定當頁面回送時，所要執行的服務器端函數。
????ActiveTabIndex:第一個要被顯示的索引標簽。
????CssClass:替每個索引標簽指定一個自定義的CSS樣式。
????Height:索引標簽主體的高度（不將TabPanel的標題高度列入計算).
????Width:索引標簽主體的寬度。
????ScrollBars: 在索引標簽容器中，顯示滾動條的方式，可以設置成下列幾種：
?????None:? 不顯示滾動條。
?????Horizontal:只顯示水平滾動條。
?????Vertical: 只顯示垂直滾動條。
?????Both:同時顯示水平和垂直滾動條。
?????Auto:根據需要，自動顯示最適當的滾動條。

代碼實例：
<form?id="form1"?runat="server">
????<div>
????????<asp:ScriptManager?ID="ScriptManager1"?runat="server">
????????</asp:ScriptManager>????
????</div>
????
????????<ajaxToolkit:TabContainer?ID="tcTab"?runat="server"
????????????OnClientActiveTabChanged="DoActiveTabChangedClient"
????????????OnActiveTabChanged="DoActiveTabChangedServer"
????????????CssClass="cssLiMing_tab"?ScrollBars="Auto"?ActiveTabIndex="0"
????????????Height="200"?Width="450px">
????????????<ajaxToolkit:TabPanel?ID="tpValidator"?runat="server"
????????????????ScrollBars="None"?Enabled="true"?Visible="true">
????????????????<HeaderTemplate>
????????????????????<font?color="Blue">輸入姓名</font>
????????????????</HeaderTemplate>
????????????????<ContentTemplate>
????????????????????<div?class="title">使用服務器端驗證器</div>
????????????????????請鍵入您的姓名：<br?/>
????????????????????<asp:TextBox?ID="txtRequired"?runat="server"?/>???????????????????
????????????????</ContentTemplate>
????????????</ajaxToolkit:TabPanel>

????????????<ajaxToolkit:TabPanel?ID="tpResult"?runat="server">
????????????????<HeaderTemplate>
????????????????????查看結果
????????????????</HeaderTemplate>
????????????????<ContentTemplate>
????????????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?UpdateMode="Conditional">
????????????????????????<ContentTemplate>
????????????????????????????<div,>顯示于前一個索引標簽中，所輸入的姓名</div>
????????????????????????????您所輸入的姓名為：<br?/>
????????????????????????????<%=?this.txtRequired.Text%>
????????????????????????</ContentTemplate>
????????????????????????<Triggers>
????????????????????????????<asp:AsyncPostBackTrigger?ControlID="tcTab"
????????????????????????????????EventName="ActiveTabChanged"?/>
????????????????????????</Triggers>
????????????????????</asp:UpdatePanel>
????????????????</ContentTemplate>
????????????</ajaxToolkit:TabPanel>

????????????<ajaxToolkit:TabPanel?ID="tpBooks"?runat="server"
????????????????ScrollBars="Auto"
????????????????Enabled="true"
????????????????Visible="true">
????????????????<HeaderTemplate>
????????????????????<font?color="#5533ff">詳細信息</font>
????????????????</HeaderTemplate>
????????????????<ContentTemplate>???????????????????
????????????????????<asp:Panel?ID="panTitle"?runat="server"?Height="30px"?Width="650px"
???????????????????????????????Style="background-color:?Pink">
??????????????????????<div?style="padding:?5px;?cursor:?hand;">
????????????????????????<div?style="float:?left;">
??????????????????????????<asp:Image?ID="Image1"?runat="server"?ImageUrl="~/Images/Expand.gif"?/>
????????????????????????</div>
?????????????????????
????????????????????????<div?style="float:?right;?color:?brown">
??????????????????????????<asp:Label?ID="Label1"?runat="server"></asp:Label>
????????????????????????</div>
??????????????????????</div>
????????????????????</asp:Panel>

???????????????????
????????????????????<asp:Panel?ID="panContent"?runat="server"?Width="650px"
???????????????????????????????Style="background-color:?AliceBlue;
??????????????????????????????????????color:?Blue;?padding:?5px?5px?5px?5px">?????????????????????
????????????????????????<ItemTemplate>
??????????????????<div>個人檔案</div>
????????????????????<ul>
????????????????????????<li>姓名：王曉成</li>
????????????????????????<li>性別：男</li>
????????????????????????<li>職業：程序員</li>
????????????????????????<li>聯系方式：abcdwxc@gmail.com</li>
????????????????????????<li>住址：北京海淀</li>
????????????????????</ul>
????????????????????<br?/>
????????????????????????</ItemTemplate>
??????????????????????
????????????????????</asp:Panel>
????????????????????
????????????????????<ajaxToolkit:CollapsiblePanelExtender?ID="CPE"?runat="server"
??????????????????????????????????????????????????????????TargetControlID="panContent"
??????????????????????????????????????????????????????????CollapseControlID="panTitle"
??????????????????????????????????????????????????????????ExpandControlID="panTitle"
??????????????????????????????????????????????????????????TextLabelID="Label1"
??????????????????????????????????????????????????????????ExpandedText="（隱藏內容）"
??????????????????????????????????????????????????????????CollapsedText="（顯示內容）"
??????????????????????????????????????????????????????????ImageControlID="Image1"
??????????????????????????????????????????????????????????ExpandedImage="~/Images/Collapse.gif"
??????????????????????????????????????????????????????????CollapsedImage="~/Images/Expand.gif"
??????????????????????????????????????????????????????????ExpandDirection="Vertical"
??????????????????????????????????????????????????????????SuppressPostBack="true">
????????????????????</ajaxToolkit:CollapsiblePanelExtender>
????????????????</ContentTemplate>
????????????</ajaxToolkit:TabPanel>
????????</ajaxToolkit:TabContainer>

????????<table?width="670px">
????????????<tr>
????????????????<td?width="50%">
????????????????????<input?id="btnHide"?type="button"?value="隱藏第三個索引標簽"?onclick="disableTab(2);"?/>
????????????????</td>
????????????????<td>
????????????????????<input?id="btnUnHide"?type="button"?value="開啟第三個索引標簽"?onclick="enableTab(2);"?/>
????????????????</td>
????????????</tr>
????????????<tr>
????????????????<td?align="right">
????????????????????所選取的索引標簽名稱：
????????????????</td>
????????????????<td>
????????????????????<asp:Label?ID="lblCurrentTab"?runat="server"></asp:Label>
????????????????</td>
????????????</tr>
????????</table>
</form>
運行結果：
????????
????????
????????

轉載于:https://www.cnblogs.com/abcdwxc/archive/2007/11/14/959017.html

總結

以上是生活随笔為你收集整理的tabs 控件的全部內容，希望文章能夠幫你解決所遇到的問題。

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