Question

我正在使用AJAX Tab Container，如下所示。我有一个CSS来格式化选项卡面板标题。我在那里使用过图像（浅蓝色）。现在我想要两件事：我想摆脱虚线框我希望所选标签变成浅蓝色。（我知道浅蓝色图像出现在背景中。只是它没有出现在选定的标签上）

tab container

 <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
                    CssClass="ajax__tab_lightblue-theme">
                    <asp:TabPanel runat="server" HeaderText="My Profile" ID="tbpnlMyProfile">
                        <HeaderTemplate>
                            My Profile</HeaderTemplate>
                        <ContentTemplate>
                            <table style="width: 100%;">
                                <tr>
                                    <td class="colwid colht">
                                         <strong><a href="#" id="lnkEditMyInfo" class="small-heading">Edit My Info</a>
                                        </strong>
                                    </td>
                                    <td>
                                        &nbsp;<asp:Label ID="lblFirstNameMyProfile" runat="server" Text="First Name"></asp:Label>
                                    </td>



.ajax__tab_lightblue-theme .ajax__tab_header 
{
font-family:arial,helvetica,clean,sans-serif;
font-size:small;
border-bottom:solid 5px #c2e0fd;
}
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_outer 
{
background-image:url('Images1/lightblue.jpg') #d8d8d8 repeat-x;
margin:0px 0.16em 0px 0px;
padding:1px 0px 1px 0px;
vertical-align:bottom;
border:solid 1px #a3a3a3;
border-bottom-width:0px;
}
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_tab
{    
color:#000;
padding:0.35em 0.75em;    
margin-right:0.01em;
}
.ajax__tab_lightblue-theme .ajax__tab_hover .ajax__tab_outer 
{
background-image: url('Images1/lightblue.jpg') #bfdaff repeat-x left -1300px;
}
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_tab 
 {
color:#000;
}
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer
{
background-image:url('Images1/lightblue.jpg') #ffffff repeat-x left -1400px;
}
    .ajax__tab_lightblue-theme .ajax__tab_body 
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
padding:0.25em 0.5em;
background-color:#ffffff;    
border:solid 1px #808080;
border-top-width:0px;
 }

Answer 1

虚线框来自大纲，这是一个特定于浏览器的功能，所有浏览器都以不同的方式呈现。您可以通过添加样式outline:none;来禁用它。有了这个说我不会推荐它，因为残疾人在通过网站点击时依赖于此。

地址簿标签下的空格。这很可能是一些不需要的填充或边距。将地址簿的边距和填充设置为padding:0;和margin:0;，看看会发生什么。

回答您的意见：

好吧，我没有看到Markup的“我的个人资料”和“地址簿”。所以我假设这是一些“开箱即用”的ASP.NET东西。但是你需要添加它的是“我的个人资料”和“地址簿”链接。

假设您生成的HTML是这样的：

<ul>
   <li><a href="">My Profile</a></li>
   <li><a href="">Address Book</a></li>
</ul>

您可以像这样在元素中添加一个类： （注意类tabednav）

<ul class="tabednav">
   <li><a href="">My Profile</a></li>
   <li><a href="">Address Book</a></li>
</ul>

然后将CSS添加到样式表中：

.tabednav li a {outline:none;}

Answer 2

由于您使用的是AjaxToolKit，请在CSS中设置以下内容。

/*Remove the border from the TabStrip*/
.ajax__tab_lightblue-theme .ajax__tab_header 
{
    border-bottom:none;
}

/*Add a border to the active tab*/
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer
{
    border:solid 5px #c2e0fd;
}

ajax选项卡容器CSS未正确显示

2 个答案: