Setting Selected Style in AJAX Control Toolkit - TabContainer

Question

I am using a tabContainer in my page, and I have set the HeaderTemplete - e.g:

<cc1:TabContainer ID="TabContainer1" runat="server" CssClass="tab">

        <cc1:TabPanel ID="ListView" runat="server" HeaderText="List View">
        <HeaderTemplate>
            <asp:Label style="padding:2px;" Width="100px" ID="ListHeader" runat="server" 
                CssClass="tdheader" Text="List View"></asp:Label>
        </HeaderTemplate>
            <ContentTemplate>
           </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel ID="MapView" runat="server" HeaderText="Map View">
        <HeaderTemplate>
            <asp:Label style="padding:2px;" Width="100" ID="Label1" runat="server" CssClass="tdheader" Text="Map View"></asp:Label>
        </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </cc1:TabPanel>
        </cc1:TabContainer>

How can set the style of the Active tab, i.e. I want the active tab to be blue and the rest of the tabs as grey.

Answer 1

In your CSS class for the tabs, use the ajax__tab_active class. Take a look at the Tabs example page for a list of CSS classes that can be applied to the Tabs control.

I took my tabs theme from Matt Berseth's site, and he uses these classes in his sample code.