从 AJAX 工具包选项卡面板中删除边框

Question

我在使用 AjaxControlTollkit 选项卡时遇到问题。我想删除选项卡的边框，因为我真的不需要它们（显示原因）。这是我的代码的简化示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default-Defaut.aspx.cs"
    Inherits="TinTan._Default" MasterPageFile="~/CLF20.Master" Culture="auto"
    UICulture="auto" EnableEventValidation="false" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" 
        EnablePageMethods="True" CombineScripts="True">
        <Services>
            <asp:ServiceReference Path="AutoComplete.asmx" />
        </Services>
     </asp:ToolkitScriptManager>
    <div>
    <!--tabs in which all the options will be avaible (using AJAX for faster respone)-->
    <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
    <Triggers>
        <asp:PostBackTrigger ControlID="btnPostBack" />
    </Triggers>
    <ContentTemplate>
        <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="CheckActiveTab" OnActiveTabChanged="TabContainer_ActiveTabChanged" 
             BorderWidth="0px" >

<asp:TabPanel ID="tabAddTan" runat="server" Visible="false">
                <HeaderTemplate>
                    Add Tan (Admin)
                </HeaderTemplate>
                <ContentTemplate>
                    <div class="divTable">
                        <div class="divRow">
                            <asp:Label ID="lblAddTanTitle" runat="server" Text="Add TAN" Font-Bold="true" Font-Size="Large"></asp:Label>
                        </div>
                    </div>
                    <asp:UpdatePanel ID="pnlAddTan" runat="server" UpdateMode="Always">
                        <ContentTemplate>
                            <div class="divTable">
                                <div class="divRow">

                                    <asp:AsyncFileUpload OnUploadComplete="UploadComplete" runat="server" OnUploadedComplete="UploadComplete"
                                        ID="AsynchAddTan" />
                                </div>
                                <div class="divRow">
                                    <asp:Button ID="btnAddTanClick" runat="server" Text="Upload File" OnClick="UploadComplete" />
                                </div>
                            </div>

                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
            </asp:TabPanel>
</asp:TabContainer>

这是我的尝试和结果：

• 使用 BorderWidth="0px"、BorderStyle="none"、BorderColor="white" 属性：不起作用，边框没有改变
• 添加一个 CSS 类并将 TabContainer 与 CssClass 属性链接： 它删除了所有选项卡的样式，选项卡标题只是纯文本。边界不在那里

这是我使用的 CSS：

<style type="text/css">
        .AjaxBorder .ajax__tab_body
        {
            border:0;
        }
        .AjaxBorder .ajax__tab_tab 
        {
            height:13px;
            padding:4px;
            margin:0;
            background:url(Tabs/tab.gif) repeat-x;
        }
    </style>

它位于母版页中。当我尝试使用 CssClass 将它链接到 AjaxTabContainer 时，.Ajaxborder 类在 VS2010 为我提供的选择中。

• 使用 style 属性并设置border:0 none white；其中： 与第一次尝试的结果相同，ajax 选项卡没有变化。

我最接近目标的是第二个选项。但是我不明白为什么当我只告诉他删除边框时它会删除所有选项卡的样式。我也不明白为什么其他选项不对选项卡做任何事情。

谢谢 雨果

Answer 1

在应用程序中，我通过以下方式应用了 CSS 在脚本管理器之后添加一个虚拟标签容器

使用的样式 .ajax__tab_xp .ajax__tab_tab { 高度：21px； }

.ajax__tab_xp .ajax__tab_header
{
     border:0;
     border-top:0;
     border-top-color:White;

}   

对 tabcontainer 使用 cssclass="ajax__tab_xp" ..它对我有用

如果有用请点此链接http://forums.asp.net/t/1300660.aspx/1

Answer 2

使用

outline-style:none;

删除活动选项卡上的框

或

outline-color:Blue;

要获得蓝色，而不是 ajaxcontroltoolkit 演示中那种讨厌的棕色和蓝色

....ajax__tab_active .ajax__tab_tab {background:url('tab-active-verticalleft_b.gif') repeat-x; outline-style:none}

Answer 3

添加！重要

<style type="text/css">
        .AjaxBorder .ajax__tab_body
        {
            border:0 !important;
        }
        .AjaxBorder .ajax__tab_tab 
        {
            height:13px;
            padding:4px;
            margin:0;
            background:url(Tabs/tab.gif) repeat-x;
        }
    </style>

Answer 4

只需将轮廓设置为 0；

我就是这样做的

.MyTabStyle .ajax__tab_active .ajax__tab_tab
{
     outline:0;    
}