AjaxToolkit控件之TabContainer ——自定义CSS添加方法

按照Tab作者Ronald Buckton所说，Tab的CSS包含如下几个类：

(1).ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer.

(2).ajax__tab_outer:An outer element of a tab,often used to set the left-side background image of the tab.

(3).ajax__tab_inner:An inner element of a tab,often used to set the right-side image of the tab.

(4).ajax__tab_tab:An element of a tab that contains the text content.

(5).ajax__tab_body:A container element that wraps the area where a TabPanel is displayed.

(6).ajax__tab_hover:This is applied to a tab when the mouse is hovering over.

(7).ajax__tab_active:This is applied to a tab when it is the currently selected tab. 根据对

TabContainer对应的js进行研究发现：TabContainer构造如下：

<div id="Tabs" class="ajax_tab_my" style="width:580px;visibility:hidden;">
 <div id="Tabs_header">
  <span id="__tab_Tabs_Panel1">
                    <div style="width:145px;">First</div>
                </span><span id="__tab_Tabs_Panel3">
                    <div style="width:143px;">Second</div>
                </span><span id="__tab_Tabs_Panel2">
                    <div style="width:120px;">Third</div>
                </span><span id="__tab_Tabs_Panel4">
                    <div style="width:120px;">Fouth</div>
                </span>
 </div>
 <div id="Tabs_body">
  <div id="Tabs_Panel1" style="display:none;visibility:hidden;">
  This is First Tab
  </div>
  <div id="Tabs_Panel3" style="display:none;visibility:hidden;">
  This is Second Tab
  </div>
  <div id="Tabs_Panel2" style="display:none;visibility:hidden;">
  This is Third Tab
  </div><div id="Tabs_Panel4" style="display:none;visibility:hidden;">
  This is Fouth Tab
  </div>
 </div>
</div>

ID为Tabs的Div是总体，将整个TabContainer相关的内容都包在里面。

ID为Tabs_header的DIV是Header部，将所有Tab的Header都包在里面。

在Tabs_header里面的每个Span就是对应的每个Header头。

ID为Tabs_body的Div就是Body部，将每个Tab对应的Body包在里面。

在Tabs_body里面的每个Span就是对应的每个Body。

ajax__tab_header 这个CSS对应加载Tabs_header这个DIV上。

ajax__tab_tab这个CSS对应加载在Tabs_header里面的span中。

Tabs_body 这个CSS对应加载Tabs_body这个DIV上

在TabContainer初始化的时候对Header部动态生成了另外2个Span分别加载ajax__tab_outer和ajax__tab_inner这2个属性。

其包含关系如下： Header->Outer->Inner->ajax__tab_tab

微软对应TabContainer有一套默认的CSS，下面是自定义自己CSS的方法：

CSS文件中添加：

.ajax_tab_my .ajax__tab_header
{
padding:0px;
margin:0;
border:10px solid #555555;
}
.ajax_tab_my .ajax__tab_outer
{
padding:0px;
margin:0;
border:10px solid #444466;
}

.ajax_tab_my .ajax__tab_inner
{
padding:0px;
margin:0;
border:10px solid #664444;
}
.ajax_tab_my .ajax__tab_tab
{
padding:0px;
font-family: "MS UI Gothic";
font-size: 12px;
margin:0;
border:10px solid #446644;
}
.ajax_tab_my .ajax__tab_hover .ajax__tab_outer
{
}
.ajax_tab_my .ajax__tab_hover .ajax__tab_inner
{
}
.ajax_tab_my .ajax__tab_hover .ajax__tab_tab
{
}
.ajax_tab_my .ajax__tab_active .ajax__tab_outer
{
}
.ajax_tab_my .ajax__tab_active .ajax__tab_inner
{
}
.ajax_tab_my .ajax__tab_active .ajax__tab_tab
{
}
.ajax_tab_my .ajax__tab_body
{
border:10px solid #774477;
background-color:#771177;
min-height:400px;
height:auto;
}

画面（.aspx）中添加

<ajaxToolkit:TabContainer runat="server" ID="Tabs"  ActiveTabIndex="0" CssClass="ajax_tab_my">

ajax_tab_my是自己定义的名字可以随意改，后面的ajax__tab_header等名字是微软默认的名字不可以修改。