每当有人打开时，隐藏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'; 
    } 
    }