0

我有一个包含 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 一样吗？

4

2 回答 2

0

我能够解决这个问题，但是它的微妙原因是什么？，我还没有掌握，我修复了它，但我不确定为什么它首先被“破坏”。

如上所述，只有在使用 IE 10.0.9200 访问位于我们的托管服务提供商的网站时，才会出现我们网站上某些“缺失”CSS 样式的问题。

当访问在我们内部开发服务器上本地运行的网站时，IE 10.0.9200 没有任何问题。所以我们认为是我们的托管服务提供商的网络服务器设置（或与我们内部开发网络服务器不同的设置），因为相同的 IE 浏览器版本在我们的本地开发服务器上没有出现这个问题。

我们的网站会动态更改选项卡式工具栏的 CSS“className”，以指示选择了哪个选项卡。每个选项卡都是一个“标签”html 元素。

选项卡有 2 种类型的 CSS 更改：
(1) 在我们的 javascript 中，一行代码document.getElementById('tab3').style.backgroundColor = "white"
(2) 紧随其后，仅在某些情况下，我们更改了选项卡的类名通过： document.getElementById('tab1').className = "showThisTabIsSelectedCssClass";

在 Firefox 和在我们的开发服务器上运行的 IE 10.0.9200 中——“className”的更改似乎“清除”（或重置）了我们在某些条件下所做的 style.backgroundColor 更改，就在更改 CSS 之前选项卡元素的“类名”。

当我们在开放的网络上访问我们的网站时，Firefox 也做了同样的事情（在我们重置“className”时清除或重置 style.backgroundColor 更改）。

但无论出于何种原因，相同版本的 IE 10.0.9200 并没有丢弃style.backgroundColor="white" 更改，即使更改了 className。style.backgroundColor="white" 改变了tab元素的背景为白色，然后我们在一定条件下改变了'className'，新的CSS类给tab强加了蓝色的backgroundColor，但是className后面还是有白色的backgroundColor改变。

我不确定为什么 IE 10.0.9200 仅在查看我们的托管服务提供商在线托管的网站时出现此问题，而不是在本地开发机器上显示我们的网站时出现此问题。

该修复要求我们有条件地避免代码行style.backgroundColor="white" ，方法是在代码中提前一点，我们最终需要更改选项卡元素的 CSS 类名。

换句话说，IE 10.0.9200即使在更改了元素的“className”之后仍然保留了 style.backgroundColor="white" 设置，尽管新的 CSS 类强加了它自己的 backgroundColor。

于 2013-10-14T15:34:12.387 回答
0

嗨，下面的代码是我发布的 jquery 代码的确切纯 js 代码

function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
      ele.className=ele.className.replace(reg,' ');
  }
}

ele--> id 和 cls--> classname..如果不是，应该可以恢复..例如

function handleTabSelect(whichTab, thisOne)
  {

         var ele = document.getElementById(whichTab);
    addClass(ele, "be-still");
    // or
    removeClass(ele, "be-still");
  }
于 2013-10-14T05:32:36.550 回答