从 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 类并将其链接到具有 CssClass 属性的 TabContainer： 它删除了选项卡的所有样式，选项卡标题只是纯文本。边框没有想到

这里是我使用的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 白色；其中：与第一次尝试的结果相同，ajax 选项卡没有更改。

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

谢谢 雨果

Answer 1

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

使用的样式
.ajax__tab_xp .ajax__tab_tab
{
高度：21px；
对 tabcontainer 使用 cssclass="ajax__tab_xp" ..

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

}   

它对我有用

如果有用的话也请浏览此链接 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')重复-x；大纲样式：无}

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;    
}