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>

所以我想要做的是，当按下其中一个选项时，其他一切都被隐藏，只显示分配了特定<a>标记的div。单击新的<a>标记时，将隐藏旧标记，并显示新的标记。

我尝试添加document.getElementsByClassName('refresh').style.display='none';，希望每个附加了“refresh”的课程都会被放在display:none上，但这不会以某种方式起作用。结果是在单击链接后，将显示div。单击一个新链接后，该div也会显示，而不会隐藏旧的div。希望你有一些建议，提前谢谢。

更新：

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（'refresh'）将返回元素数组。

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';
    }
  }

每当新的打开时隐藏div

1 个答案: