1

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

选项卡容器

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

2 回答 2

0

由于您使用的是 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;
}
于 2013-05-07T18:35:36.863 回答
0

虚线框来自轮廓，这是浏览器特有的功能，所有浏览器都以不同的方式呈现。您可以通过添加样式来禁用它outline:none;。话虽如此，我不推荐它，因为残疾人在浏览网站时会依赖它。

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

回答您的评论：

好吧，我没有看到“我的个人资料”和“通讯录”的标记。所以我假设这是一些“开箱即用”的 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;}
于 2013-03-19T14:55:19.793 回答