JavaScript - 隐藏所有其他 div

Question

我有许多 div 仅在单击链接后才可见。 如何关闭所有打开的 div 以便只有点击的那个可见？
我正在使用这个 .js：

    function showhide(id){
        if (document.getElementById) {
        var divid = document.getElementById(id);
        divid.style.display = (divid.style.display=='block'?'none':'block');
        } }

        <a href="javascript:void(null)" onclick="showhide('features');">features</a>
<a href="javascript:void(null)" onclick="showhide('design');">design</a>
<a href="javascript:void(null)" onclick="showhide('create');">create</a>

谢谢乌利

Answer 1

一种方法是添加一个类并基于该类查找元素以隐藏它们（如其他答案中所示）

另一种方法是将元素的状态存储在一个对象中，并使用它来识别需要关闭的打开的元素。

var divState = {}; // we store the status in this object
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);

        divState[id] = (divState[id]) ? false : true; // initialize / invert status (true is visible and false is closed)
        //close others
        for (var div in divState){
            if (divState[div] && div != id){ // ignore closed ones and the current
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; // reset status
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

演示在http://jsfiddle.net/gaby/LfzYc/

Answer 2

您可以使用document.getElementByTagName来检索所有 div。

然后迭代它们，如果是之前从getElementById获得的 div，则为每个将样式设置为block ，否则none 。

（我建议这里所有相关的div都加一个类，迭代时只考虑这个类的div，不影响页面不相关的部分。）

Answer 3

以下代码将隐藏所有 div 并显示您单击的那个...

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

<a href="#" onclick="showhide('features');" >features</a>
<a href="#" onclick="showhide('design');"  >design</a>
<a href="#" onclick="showhide('create');" >create</a>

<div class="hideable" id="features">Div 1</div>
<div class="hideable" id="design">Div 2</div>
<div class="hideable" id="create">Div 3</div>

我还添加了return false; 防止链接的默认行为。 它比在链接的href属性上使用javascript:void(null)更清晰、更容易理解。 它解决了你的问题吗？

Answer 4

可以在临时数组上更新 div 的 ID 或类名称，简单的 if 条件会有所帮助。 在我的用例中对我有用的类似片段。

var screens = ["screen_splash","screen_login","screen_register","route_getotp","route_loginvalidate","route_inputotp","screen_dashboard","screen_search","screen_cart","screen_myaccount"];

function changescreen(screen)
{
    screens.forEach(function(value)
    {
        if(value == screen){
            $("#"+value).show();
        }else{
            console.log("Disable Screen : " +value);
            $("#"+value).hide();
        }
    });

}

注意：记得把 # 改成 . 基于代码中 id 或类名的使用。

Answer 5

使用类名是执行此操作的典型方法，但我建议使用像 jquery/rightjs/whateveryoulike 这样的库来执行此操作； 因为：< IE9 不支持 getElementsByClassName()，< IE8 不支持 querySelectorAll()。 如果您不能使用 lib，则需要通过 getElementsByTagName("div") 遍历所有 div 并检查该类。