每當有人打開時，隱藏div

Question

我有一個網站，有兩個選項，代表<a>標籤，椅子和桌子。這是在每次點擊<a>標籤時都會顯示div的HTML。

<div id="workbench_menu"> 
       <p><strong>Living Room</strong></p> 
       <a onclick="chairs()" href="#"><p>chairs</p></a> 
       <a onclick="tables()" href="#"><p>tables</p></a> 
      </div> 
      <div id="workbench_objects"> 

       <div id="tables" class="refresh" style="display:none;"> 
        <div class="workbench_object_info"> 
         <img src="images/house/objects/table_4.png"> 
         <p>20 oak logs</p> 
        </div> 
       </div> 

       <div id="chairs" class="refresh" style="display:none;"> 
        <div class="workbench_object_info"> 
         <img src="images/house/objects/stonechair_1.png"> 
         <p>20 oak logs</p> 
        </div> 
       </div> 

      </div> 

負責處理該功能的JavaScript是在這裏：

  <script> 
       function tables() { 
        document.getElementsByClassName('refresh').style.display='none'; 
        document.getElementById('tables').style.display='inline'; 
       } 
       function chairs() { 
        document.getElementsByClassName('refresh').style.display='none'; 
        document.getElementById('chairs').style.display='inline'; 
       } 
      </script> 

所以我想做的事，就是當按下其中一個選項，其他的一切都是隱藏的，只有的div分配給特定的<a>標籤將被顯示。當單擊新的<a>標籤時，舊標籤將被隱藏，並且將顯示新標籤。

我曾嘗試添加一個document.getElementsByClassName('refresh').style.display='none';，希望每個帶有「刷新」的類都附加到display:none上，但這不起作用。結果是，單擊鏈接後，顯示div。點擊一個新鏈接後，顯示的div也不會隱藏舊的div。希望你有一些暗示，在此先感謝。

UPDATE：

var length = document.getElementsByClassName('refresh').length; 
       for(var i=0; i<length;i++){ 
        document.getElementsByClassName('refresh')[i].style.display='none'; 
       } 
       function tables() { 
        document.getElementById('tables').style.display='inline'; 
       } 
       function chairs() { 
        document.getElementById('chairs').style.display='inline'; 
       } 

Answer 1

document.getElementsByClassName（ '刷新'）將返回元素的數組。

function tables() { 
     hideElements(); 
     document.getElementById('tables').style.display='inline'; 
    } 
    function chairs() { 
     hideElements(); 
     document.getElementById('chairs').style.display='inline'; 
    } 
    function hideElements(){ 
    var length = document.getElementsByClassName('refresh').length; 
    for(var i=0; i<length;i++){ 
     document.getElementsByClassName('refresh')[i].style.display='none'; 
    } 
    }