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属性链接：它删除了所有选项卡的样式，标签Header只是纯文本。边界没有想到

这是我使用的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 在脚本管理器

之后添加一个虚拟tabcontainer

使用的样式 .ajax__tab_xp .ajax__tab_tab { 身高：21px; }

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

}

使用cssclass =“ajax__tab_xp”for tabcontainer ..它适用于我

如果有用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;    
}

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

4 个答案: