3

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はメンバーからメンバーへ/メンバーから変更されていません-非表示です。

ばかげた間違いをしたことがありますか？私は両方を同じように変更するので、なぜ一方が機能し、もう一方が壊れているのですか？

4

1 に答える 1

3

この投稿はあなたの質問に答えます：IE7のgetElementsByName

要約すると、IEは、デフォルトでname属性をサポートしない名前による要素の取得をサポートしていません。これが、標準フォームの入力フィールドは機能しますが、divは機能しない理由です。

于 2012-07-20T16:19:07.510 に答える