我的Javascript不起作用。不知道它的功能，我如何調用它的CSS我用還是什麼

Question

我的功能：

function ChangeStep(id) 
{ 
    var i = 1; 

    // hide all other tabs: 
    while(i<10) { 
     var divID = 'tabs' + i; 
     if (divID !== null) { 
      document.getElementById(divID).className += " hide"; 
     } 
     i++; 
    } 

    // show this one 
    document.getElementById(id).className += " show"; 
} 

如何我打電話吧：

<div id="prev"><img src="img/prv.png" onClick="ChangeStep('tabs1'); return false;"></div> 
<div id="next"><img src="img/nxt.png" onClick="ChangeStep('tabs2'); return false;"></div> 

的div我想顯示/隱藏：

<div id="tabs1" class="hide"><h1>Step 1</h1></div> 
<div id="tabs2" class="show"><h1>Step 2</h1></div> 

我的CSS：

.hide { visibility: hidden; } 
.show { visibility: visible; } 

基本上我想要做的是：當我點擊「下一個」或「上一個」時，隱藏所有其他顯示對應的「Tab」。這應該通過添加「隱藏」或「顯示」類來完成，具體取決於是隱藏還是可見。

Answer 1

您總是追加類名，所以它們（在顯示一次後）將成爲show和hide類的成員，並且兩個規則集都將應用（按正常級聯順序）。 =

如果你確實需要保持對元素的其他類，那麼你可以使用classList：

如果您不需要維護任何其他類，你可以用一個簡單的分配替換您的附加操作符+=代替。

document.getElementById(divID).classList.remove('show'); 
document.getElementById(divID).classList.add('hide'); 

如果您需要支持舊-IE，那麼你可以使用填充工具（這可能會運行正則表達式在classList）或提供類似功能的API。最常見的JS庫（如YUI和jQuery）內置了一個。