javascript - 使用 Javascript 单击时显示 1 个 div 并隐藏所有其他 div

Question

我正在我的网站上设置一个“个人简介”部分，我有 3 张员工图片和 3 个 div，每个员工的个人简介如下。我想默认隐藏所有BIOS，然后仅显示与单击的图像关联的div，并隐藏所有其他div。

目前似乎没有找到元素，因为我得到“未定义”

到目前为止，这是我的 HTML:

<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

还有我的 JavaScript:

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

有什么想法吗？谢谢!

Answer 1

使用常规的 for 循环，因为 for in 循环将循环遍历 NodeList 的其他属性，而不仅仅是遍历元素列表

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var i=0;i<divs.length;i++) {
            divs[i].style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle