下面来看一个示例：
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程，命名为Tabs。
2)在Default.aspx页面上添加一个TabContainer控件，同时在该容器控件中添加两个TabPanel。分别命名为TabPanel1和TabPanel2，同时设置HeaderText为QQ和Msn,电影,音乐。
<cc1:tabcontainer id="TabContainer1" runat="server" activetabindex="0" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"><ContentTemplate> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate>QQ:<asp:TextBox id="TextBox1" runat="server"></asp:TextBox> <br /> pwd<asp:TextBox id="TextBox2" runat="server"></asp:TextBox><br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> <asp:Label ID="Label1" runat="server" Text="Label" Width="153px"></asp:Label><br /> <asp:Label ID="Label2" runat="server" Text="Label" Width="189px"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <BR /></ContentTemplate><HeaderTemplate>QQ</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2"><ContentTemplate>msn:<asp:TextBox id="TextBox3" runat="server"></asp:TextBox> <BR />pwd<asp:TextBox id="TextBox4" runat="server"></asp:TextBox> </ContentTemplate><HeaderTemplate>MSN</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel3" ID="TabPanel3"><ContentTemplate>你最喜欢什么电影</ContentTemplate><HeaderTemplate>电影</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel4" ID="TabPanel4"><ContentTemplate>你最喜欢什么音乐</ContentTemplate><HeaderTemplate>音乐</HeaderTemplate></cc1:TabPanel></cc1:tabcontainer><br />属性说明：
OnClientActiveTabChanged：在客户端对当前激活的Tab进行改变时执行的事件脚本。
HeaderText：在TabContainer中的每个Tab的标题内容。
function ActiveTabChanged(sender, e) 
{
var CurrentTab = $get('<%=lblMsg.ClientID%>');//lblmsg这个是lable的控件id,lable在ie状态下就是<span>的形式表现的. lblMsg.innerHTML = sender.get_activeTab().get_headerText();30在页面上添加ActiveTabChanged事件函数，用于显示。
这个函数是写在aspx页面的,用于绑定 OnClientActiveTabChanged
4)在TabContainer下面拖放一个Label，命名为lblMsg。用于显示当前激活的Tab。
代码如下:
<asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>效果如下:
整体代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tab.aspx.cs" Inherits="YDZC.AjaxControlToolkit.Tab" %><%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!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" > <script language =javascript> function ActiveTabChanged(sender, e) { var CurrentTab = $get('<%=lblMsg.ClientID%>');//lblmsg这个是lable的控件id,lable在ie状态下就是<span>的形式表现的. lblMsg.innerHTML = sender.get_activeTab().get_headerText();// Highlight(lblMsg);
} // var HighlightAnimations = {};// function Highlight(el) {// if (HighlightAnimations[el.uniqueID] == null) {// HighlightAnimations[el.uniqueID] = AjaxControlToolkit.Animation.createAnimation({// AnimationName : "color",// duration : 0.5,// property : "style",// propertyKey : "backgroundColor",// startValue : "#FFFF90",// endValue : "#FFFFFF"// }, el);// }// HighlightAnimations[el.uniqueID].stop();// HighlightAnimations[el.uniqueID].play();// } function ToggleHidden(value) { $find('<%=TabContainer1.ClientID%>').get_tabs()[3].set_enabled(value); } </script><head id="Head1" runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <cc1:tabcontainer id="TabContainer1" runat="server" activetabindex="0" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"><ContentTemplate> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate>QQ:<asp:TextBox id="TextBox1" runat="server"></asp:TextBox> <br /> pwd<asp:TextBox id="TextBox2" runat="server"></asp:TextBox><br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> <asp:Label ID="Label1" runat="server" Text="Label" Width="153px"></asp:Label><br /> <asp:Label ID="Label2" runat="server" Text="Label" Width="189px"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <BR /></ContentTemplate><HeaderTemplate>QQ</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2"><ContentTemplate>msn:<asp:TextBox id="TextBox3" runat="server"></asp:TextBox> <BR />pwd<asp:TextBox id="TextBox4" runat="server"></asp:TextBox> </ContentTemplate><HeaderTemplate>MSN</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel3" ID="TabPanel3"><ContentTemplate>你最喜欢什么电影</ContentTemplate><HeaderTemplate>电影</HeaderTemplate></cc1:TabPanel><cc1:TabPanel runat="server" HeaderText="TabPanel4" ID="TabPanel4"><ContentTemplate>你最喜欢什么音乐</ContentTemplate><HeaderTemplate>音乐</HeaderTemplate></cc1:TabPanel></cc1:tabcontainer><br /> <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label> <br /> <asp:Label ID="lblSer" runat="server" Text="Label" Width="200px"></asp:Label> <br /> <asp:CheckBox ID="ckBoxClose" runat="server" onclick="ToggleHidden(this.checked)" Text="隐藏最后一项"/> </form></body></html>
![[html] 写一个布局，它的宽度是不固定的100%，如果让它的宽度始终是高度的一半呢？](http://pic.xiahunao.cn/[html] 写一个布局，它的宽度是不固定的100%，如果让它的宽度始终是高度的一半呢？)
![[html] 如果要开发一个在超级大屏上显示的可视化页面，你首先要考虑什么？](http://pic.xiahunao.cn/[html] 如果要开发一个在超级大屏上显示的可视化页面，你首先要考虑什么？)
![[Silverlight]奇技银巧系列-2](http://pic.xiahunao.cn/[Silverlight]奇技银巧系列-2)
![[html] 如何解决微信浏览器视频点击自动全屏的问题？](http://pic.xiahunao.cn/[html] 如何解决微信浏览器视频点击自动全屏的问题？)
![[html] H5播放的video视频，如何实现对视频截图？](http://pic.xiahunao.cn/[html] H5播放的video视频，如何实现对视频截图？)
![[html] 前端需要注意哪些SEO?](http://pic.xiahunao.cn/[html] 前端需要注意哪些SEO?)
