我使用了母版页并在单独的页面上,我使用了ajax选项卡控件但无法更改选定的选项卡颜色.. Thanx in Advance
你可以使用这个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>
我知道这是一个老问题,但如果有人需要这个,那么一个有效的答案是:
.MyTabStyle .ajax__tab_tab /*inactive tab*/
{
outline: 0;
}
.MyTabStyle .ajax__tab_active .ajax__tab_tab /*active tab*/
{
color: #d13f31;
outline: 0;
}