更改类名ie8答案

【问题标题】：changing className ie8更改类名ie8
【发布时间】：2012-07-21 00:19:07
【问题描述】：

我在使用 Javascript 更改 div 元素的类时遇到了一些问题。我目前使用的方法（参见下面的代码）适用于 Chrome 和 Firefox，但不适用于 IE8（我没有测试过 IE9，但假设它已经可以工作，或者一旦 ie8 可以工作）。

奇怪的是，在 ie8 中，当我更改输入元素的类时，它可以工作。但是改变一个 div 的类什么都不做（类根本没有改变）

JavaScript

function switchTab(tab, button) {
    var divs = document.getElementsByName("tab-content");
    var d;
    for (counter=0; counter<divs.length; counter++) {
      d = divs[counter];
      if (d.id == tab)
        d.className = "members";
      else
        d.className = "members-hidden";
    }
    var buttons = document.getElementsByName("button");
    var bu;
    for (counter=0; counter<buttons.length; counter++) {
      bu = buttons[counter];
      if (bu.id == button)
        bu.className = "tab-active";
      else
        bu.className = "tab";
    }
    return false;

}

相关的 HTML 片段

<div id="nav">
<ul class="membernav">
   <li><input id="ob" type="button" class="tab-active" name="button" onclick="return switchTab('officers', 'ob')" value="Officers"></li>
   <li><input id="pb" type="button" class="tab" name="button" onclick="return switchTab('partners', 'pb')" value="Partners"></li>
   <li><input id="mb" type="button" class="tab" name="button" onclick="return switchTab('managers', 'mb')" value="Managers"></li>
   <li><input id="ab" type="button" class="tab" name="button" onclick="return switchTab('associates', 'ab')" value="Associates"></li>
</ul>
</div>

在 HTML 中进一步向下

<div id="tab-contents">
<div class="members" name="tab-content" id="officers">
   <!-- irrelevant content removed to save space -->
</div>

<div class="members-hidden" name="tab-content" id="partners">
  <!-- irrelevant content removed to save space -->
</div>

<div class="members-hidden" name="tab-content" id="managers">
   <!-- irrelevant content removed to save space -->
</div>

<div class="members-hidden" name="tab-content" id="associates">
   <!-- irrelevant content removed to save space -->
</div>
</div>

按钮上的类已成功切换到/从选项卡和选项卡激活。

但 div 不会从成员更改为/从成员隐藏。

我犯了一些愚蠢的错误吗？因为我改变的方式都一样，为什么一个工作而另一个坏了？

【问题讨论】：

标签： javascript html css internet-explorer internet-explorer-8

【解决方案1】：

这篇文章回答了你的问题：getElementsByName in IE7

总结一下：默认情况下，IE 不支持按名称获取不支持 name 属性的元素。这就是为什么您的标准表单输入字段可以工作，但 div 不能工作的原因。

【讨论】：