学步园

TabContainer AJAX的选项卡控件 最近项目需要要改变其默认样式 发现没有自己想象中的方便

--------------------------------------------------------------------------------

<style type="text/css">

.AjaxTabStrip .ajax__tab_tab
{
    font-size: 12px;
    padding: 4px;
    width: 105px; 
    height:16px;  
    background-image:url(../image/li/1.jpg);
}

.AjaxTabStrip .ajax__tab_hover .ajax__tab_tab
{
    font-weight:bold;
    text-decoration: underline;
}

.AjaxTabStrip .ajax__tab_active .ajax__tab_tab
{
    background-color: #C2E2ED;
    font-weight:bold;
}

.AjaxTabStrip .ajax__tab_body
{
    border: 1px solid #999999;
    padding: 8px;
    background-color: #ffffff;
    margin-right: 9px;
    margin-top:0px;
}
</style>

----------------------------------------------------------------------------

<cc1:TabContainer ID="TabContainer1" runat="server" Width="600" CssClass="AjaxTabStrip">
        <cc1:TabPanel runat="server">
        <HeaderTemplate>111</HeaderTemplate>
        <ContentTemplate>fdsf1</ContentTemplate>
        </cc1:TabPanel>
           <cc1:TabPanel ID="TabPanel1" runat="server">
        <HeaderTemplate>222</HeaderTemplate>
        <ContentTemplate>fsadf2</ContentTemplate>
        </cc1:TabPanel>
           <cc1:TabPanel ID="TabPanel2" runat="server">
        <HeaderTemplate>333</HeaderTemplate>
        <ContentTemplate>fsdfsd3</ContentTemplate>
        </cc1:TabPanel>
        </cc1:TabContainer>

 主要是通过CssClass来重写 重写的时候样式名需要遵循一定的规定