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

点線のボックスはアウトラインから来ています。これはブラウザ固有の機能で、すべてのブラウザで異なる方法でレンダリングされます。style を追加することで無効にできます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 に答える