如何在asp.net中使用ajax更改选定的选项卡颜色？

Question

我使用了母版页，并且在单独的页面上，我使用了ajax标签控件，但是无法更改所选标签的颜色。

Answer 1

您可以使用此CSS。

.MyTabStyle .ajax__tab_header
{
     font-family: "Helvetica Neue" , Arial, Sans-Serif;
     font-size: 14px;
     font-weight: bold;
     display: block;
     margin-left:20px;
     z-index:-1000;
}
.MyTabStyle .ajax__tab_header .ajax__tab_outer
{
     border-color: #222;
     color: #222;
     padding-left: 10px; /*margin-right: 3px;*/
     border: solid 1px #999;
     border-bottom-color: #d7d7d7;
    -webkit-margin-before: 1em;
    -webkit-margin-after: -1px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: -1px;
}
.MyTabStyle .ajax__tab_header .ajax__tab_inner
 {
     border-color: #666;
     color: #000;
     padding: 0px 5px 0px 5px;
 }
 .MyTabStyle .ajax__tab_hover .ajax__tab_outer
 {
     border-color: #BBB; /*color #1*/
     background: white;
     color: Black;
 }
.MyTabStyle .ajax__tab_hover .ajax__tab_inner
 {
     color: Black;
     cursor: pointer;
 }
 .MyTabStyle .ajax__tab_outer
 {
     padding: 0 16px; /* edit 16px for different tab width */
     display: inline-block;
     font: normal 12px Verdana;
     line-height: 25px; /* height #1 */
     text-decoration: none;
     color: #333;
     border: 1px solid #999; /*This color can be different from color #2 */
     border-bottom: none;
     background: #F6F6F9;
     outline: none;
     border-radius: 5px 5px 0 0;
     position: relative;
     margin: 0 -1px -1px 0;
     text-align: -webkit-match-parent;
  }
 .MyTabStyle .ajax__tab_active .ajax__tab_outer
  {
     color: white;
     font-weight: bold;
     border-color: #BBB; /*color #1*/
     background: #0099CC; /*color #2*/
     /*z-index: 3;*/
     padding: 1px 10px 0px 10px;
     border-bottom-width: 0px;
  }
  .MyTabStyle .ajax__tab_active .ajax__tab_inner
  {
     color: white;
     border-color: #333;
     padding: 0px 10px 0px 10px;
  }
 .MyTabStyle .ajax__tab_body
 {
     font-family: verdana,tahoma,helvetica;
     font-size: 10pt;
     /*background-color: #fff;*/ /*border-top-width: 0;*/
     border: solid 1px #d7d7d7; /*border-top-color: #ffffff;*/
     padding: 10px 10px;
     border-radius: 4px;
     box-shadow: 0 0 8px #CCC;
     background-color: white;
 }

的HTML

<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="100%"
    CssClass="MyTabStyle" OnClientActiveTabChanged="SaveActiveTabIndex">
    <asp:TabPanel HeaderText="Personal Details" runat="server" ID="TabPanel1">
        <ContentTemplate>
        </ContentTemplate>
    </asp:TabPanel>
</asp:TabContainer>

Answer 2

我知道这是一个老问题，但是如果有人需要这个，一个有效的答案是：

.MyTabStyle .ajax__tab_tab /*inactive tab*/
{ 
 outline: 0; 
}

.MyTabStyle .ajax__tab_active .ajax__tab_tab  /*active tab*/
{ 
 color: #d13f31; 
 outline: 0; 
}