【问题标题】：Show 1 div and hide all others on click using Javascript使用 Javascript 显示 1 个 div 并在点击时隐藏所有其他 div
【发布时间】：2014-04-23 08:09:55
【问题描述】：

我在我的网站上设置了一个“简历”部分，我有 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

有什么想法吗？谢谢！

【问题讨论】：

你永远不需要if (document.getElementById)。此外，较旧的浏览器不会执行document.getElementsByClassName()。此外，某些版本的 IE 和其他浏览器将无法使用 .getElementsByClassName() 或 .getElementsByName() 执行 for in 循环。在那些你想坚持for(var i=0,l=elementArray.length; i<l; i++)的人身上。

标签： javascript onclick hide

【解决方案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

【讨论】：

太好了，感谢您提供更新的代码，它现在运行良好。

【解决方案2】：

当使用for(var div in divs) 时，div 是不是元素。迭代 JSON 对象时使用此表示法。

你想改用这个：

for(var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
}

【讨论】：

【解决方案3】：

    try this, it is a working code 
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .share-list {
            display:none;
        }
        </style>
        </head>
        <body>

        <div onclick="shareListHideShow('t1')">
        temp1
            <div class="share-list" id="t1">t1</div>
        </div>
        <div onclick="shareListHideShow('t2')">
        temp2
            <div class="share-list" id="t2">t2</div>
        </div>
        <div onclick="shareListHideShow('t3')">
        temp3
            <div class="share-list" id="t3">t3</div>
        </div>
        <div onclick="shareListHideShow('t4')">
        temp4
            <div class="share-list" id="t4">t4</div>
        </div>
        <div onclick="shareListHideShow('t5')">
        temp5
            <div class="share-list" id="t5">t5</div>
        </div>

        <div id="out"></div>

        <script>
        //window.onload = myfunc();
        function shareListHideShow(actionId){
            var divs = document.getElementsByClassName("share-list");
            for(var i=0;i<divs.length;i++) {
                if(divs[i].id == actionId){
                    if(divs[i].style.display === "block"){
                        divs[i].style.display = "none";
                    }else{
                        divs[i].style.display = "block";
                    }
                }
                else
                    divs[i].style.display = "none";
            }
        }
        </script>
</body>
</html>

【讨论】：