ajaxToolkit:TabContainer 背景色的设置

    虽然TabPanel 有BackColor 的属性，但设置后无济于事，通过TabContainer 的CssClass 设置，必须制定所有的像什么ajax__tab_header、ajax__tab_outer、ajax__tab_inner、ajax__tab_tab、ajax__tab_hover等外观，但我又想保留xp 按钮的外观，于是从AjaxControlToolkit 源码中找出所有图片和Tabs.css，重新指定所有图片的路径，更改ajax__tab_body 的background-color 为自己想要颜色"#eeeeee"。

/*  xp theme  */
.ajax__tab_wf .ajax__tab_header
{
    font-family :  verdana,tahoma,helvetica ;
    font-size :  11px ;
    background :  url(../images/Tabs/tab-line.gif) repeat-x bottom ;
}
.ajax__tab_wf .ajax__tab_outer
{
    padding-right :  4px ;
    background :  url(../images/Tabs/tab-right.gif) no-repeat right 50% ;
    height :  21px ;
}
.ajax__tab_wf .ajax__tab_inner
{
    padding-left :  3px ;
    background :  url(../images/Tabs/tab-left.gif) no-repeat ;
}
.ajax__tab_wf .ajax__tab_tab
{
    height :  13px ;
    padding :  4px ;
    margin :  0 ;
    background :  url(../images/Tabs/tab.gif) repeat-x ;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_outer
{
    background :  url(../images/Tabs/tab-hover-right.gif) no-repeat right ;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_inner
{
    background :  url(../images/Tabs/tab-hover-left.gif) no-repeat ;
}
.ajax__tab_wf .ajax__tab_hover .ajax__tab_tab
{
    background :  url(../images/Tabs/tab-hover.gif) repeat-x ;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_outer
{
    background :  url(../images/Tabs/tab-active-right.gif) no-repeat right ;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_inner
{
    background :  url(../images/Tabs/tab-active-left.gif) no-repeat ;
}
.ajax__tab_wf .ajax__tab_active .ajax__tab_tab
{
    background :  url(../images/Tabs/tab-active.gif) repeat-x ;
}
.ajax__tab_wf .ajax__tab_body
{
    font-family :  verdana,tahoma,helvetica ;
    font-size :  10pt ;
    border :  1px solid #999999 ;
    border-top :  0 ;
    padding :  8px ;
    background-color :  #eeeeee ;
}

看结果：

请仔细看HeaderText 的右侧部分，有一个约1毫米的空隙。如果放在母板（master）中测试，一切正常，估计又是一个bug。
    但回头又想想，我只是想改变背景色而已，用得着那么费劲吗？运行后看编译后的代码

< div  id ="Tabs" style ="width:100%;visibility:hidden;" >
     < div  id ="Tabs_header" >
         < span  id ="__tab_Tabs_Panel1" > 基础信息 </ span >< span  id ="__tab_Tabs_Panel2" > 明细表 </ span >
     </ div >
     < div  id ="Tabs_body"  style ="height:400px;" >
         < div  id ="Tabs_Panel1" >         
         </ div >
         < div  id ="Tabs_Panel2"  style ="display:none;visibility:hidden;" >     
         </ div >
     </ div >
</ div >

看到Tabs_body 了吗，只要设置它的背景色就行了，为何不用js指定呢？

< script language = " javascript " >
var  Tabs_body = document.getElementById(' <%= Tabs.ClientID  %> '  +  '_body');
Tabs_body.style.backgroundColor = '#eeeeee';
</ script >

看截图：

大功告成！

转载于:https://www.cnblogs.com/wf225/archive/2007/11/28/975947.html