我有一个包含 3 个选项卡的“选项卡工具栏”。用户可以单击一个选项卡,我们的网页会根据单击的 3 个选项卡中的哪一个显示不同的数据。
为了提醒用户他们“选择”了 3 个选项卡中的哪一个,我在单击它时动态更改它的 CSS 类。
“选定”选项卡有以下变化: (1) 带有渐变的淡黄色背景;(2) 较大的字体;(3) 所选标签的宽度和高度各增加约 6 个像素。
它在 Firefox 中运行良好。但在 IE 10.0.9200 中,对选定选项卡的 CSS 类的更改在背景颜色和渐变方面失败。例如,当第一次选择选项卡#3 时,没有问题——出现黄色渐变(较大的字体和增加的宽度和高度也是如此)。
但是,如果我单击另一个选项卡然后再次单击选项卡#3,IE 似乎“忘记”了“选定”CSS 类的一部分。第二次(以及第三次和第四次等)我单击选择选项卡#3,字体大小增加,宽度和高度增加,但带有渐变的彩色背景丢失。
如果我在 IE 中的页面上“重新加载”,BAM 带有渐变的彩色背景会突然返回。
这是“选定”的 CSS 类:
.selectedTabClass{
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient( linear, left top, left bottom,
color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',
endColorstr='#ffab23');
background-color:#ffec64;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #ffaa22;
display:inline-block;
color:#333333;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:65px;
width:186px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffee66;
}
.selectedTabClass:hover {
background:-webkit-gradient( linear, left top, left bottom,
color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',
endColorstr='#ffec64');
background-color:#ffab23;
}
.selectedTabClass:active {
position:relative;
top:1px;
}
这是HTML:
<label class="selectedTabClass" id="tab3"
onclick="handleTabSelect(3, this)">this is Tab #3</label>
这是Javascript:
function handleTabSelect(whichTab, thisOne)
{
document.getElementById(whichTab).className = "selectedTabClass";
}
我需要做些什么才能使 IE 的行为始终像 Firefox 一样吗?