Question

我有一些只在点击链接后才能看到的div。如何关闭所有打开的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。

然后对它们进行迭代，对于每一个，将样式设置为block，如果它是从getElementById之前获得的div，或者none否则。{/ p>

（我建议在这里相关的所有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;以防止链接的默认行为。与在链接的javascript:void(null)属性上使用href相比，它更清晰，更易于理解。它能解决你的问题吗？

Answer 4

使用classname是执行此操作的典型方法，但我建议使用像jquery / rightjs / whateveryoulike这样的lib来执行此操作;因为：＆lt;不支持getElementsByClassName（）＆lt;不支持IE9和querySelectorAll（） IE8。如果你不能使用lib，那么你需要通过getElementsByTagName（“div”）迭代所有div并检查该类。

Answer 5

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 或类名的使用。

JavaScript - 隐藏所有其他div

5 个答案: