ASP.NET AJAX Tabs 控件样式控制

最新推荐文章于 2019-11-29 20:17:18 发布

vipxiaotian

最新推荐文章于 2019-11-29 20:17:18 发布

阅读量1.3k

点赞数

分类专栏： Asp.Net Ajax 文章标签： tabs asp.net ajax server class border

Asp.Net 同时被 2 个专栏收录

189 篇文章

订阅专栏

Ajax

35 篇文章

订阅专栏

本文介绍了一个基于ASPX的TabContainer控件的具体用法，包括如何设置样式及使用TabPanel来创建不同的面板，同时提到了在UpdatePanel中使用时可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ASPX

<toolkit:TabContainer CssClass="ajax__tab_Default" runat="server" ID="Tabs">

<toolkit:TabPanel EnableTheming="false" runat="Server" Width="300px" ID="phlInfo">

Panel1

</HeaderTemplate>

Content

</ContentTemplate>

</toolkit:TabPanel>

<toolkit:TabPanel runat="Server" ID="phlFlowLog">

panel2

</HeaderTemplate>

Panel2

</ContentTemplate>

</toolkit:TabPanel>

<toolkit:TabPanel runat="Server" ID="phlFlowFigure">

Panel3

</HeaderTemplate>

panel3

</ContentTemplate>

</toolkit:TabPanel>

</toolkit:TabContainer>

CSS:

.ajax__tab_Default .ajax__tab_header
{
    padding:12px 0 0 0px;
    height: 20px;
    background:#EDEDED url(Icons/TabLine.gif) repeat-x bottom;
}
.ajax__tab_Default .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_tab
{
    margin-left:10px;
    text-align: center;
    padding: 5px 5px 3px 10px;
    font-size: 12px;
    width:100px;
    cursor:pointer;
}

.ajax__tab_Default .ajax__tab_hover .ajax__tab_outer ,.ajax__tab_Default .ajax__tab_active .ajax__tab_outer
{
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_inner ,.ajax__tab_Default .ajax__tab_active .ajax__tab_inner
{
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab , .ajax__tab_Default .ajax__tab_hover .ajax__tab_tab
{
    margin-left:10px;
    text-align: center;
    padding: 5px 5px 3px 10px;
    font-size: 12px;
    border: solid 1px #9FACB5;
    background-color:#fff;
    cursor:pointer;
}
.ajax__tab_Default .ajax__tab_active .ajax__tab_tab
{
    border-bottom: solid 1px #FFF;
}
.ajax__tab_Default .ajax__tab_hover .ajax__tab_tab span , .ajax__tab_Default .ajax__tab_active .ajax__tab_tab span
{
    color: #B82400;
}
.ajax__tab_Default .ajax__tab_body
{
}

注意事项：
1、tab控件在UpdatePanel中时，如果tab在页面初始时不显示，则会出现小BUG