2012-07-20 47 views
3

我有一些麻煩,使用Javascript來改變一個div元素的類。我目前使用的方法(請參閱下面的代碼)適用於Chrome和Firefox,但不適用於IE8(我沒有測試過IE9,但假設它已經工作,或者將會一次ie8)。更改className ie8

好奇的部分是,在ie8中,當我改變輸入元素的類,它的工作原理。但改變一個div的類確實沒有在HTML(類沒有改變)

的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> 

進一步回落

<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> 

按鈕上的類正在成功切換到選項卡和製表符活動狀態。

但divs不會從成員更改成員/隱藏成員。

我犯了一些愚蠢的錯誤?因爲我以同樣的方式改變了,爲什麼一個人在工作而另一個人在工作?

回答

3

這篇文章回答你的問題:getElementsByName in IE7

總結:IE不支持按名稱獲取元素不支持默認的name屬性。這就是爲什麼你的標準表單輸入字段可以工作,但div不會。

相關問題