JavaScript - 隐藏所有其他divs

我有一些div在点击链接后才可见。如何关闭所有打开的div，以便只有被点击的div才可见？
我使用这个.js文件：JavaScript - 隐藏所有其他divs

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>

感谢乌利

来源

2011-12-28 Uli

可以也显示您的DIV结构 – 2011-12-28 12:12:49

的一种方法是添加一个类和寻求基于该隐藏它们的元素（如图在其他的答案）

一种替代方法是将元件的状态存储在一个对象，并使用该确定需要关闭打开的那些..

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/

来源

2011-12-28 12:26:37

有没有一种方法来限制打开/关闭/重置为只有在某些部分下的div id（例如所有div下的div id = sidebar“将经历打开/关闭/重置循环）？希望这是有道理的。 – jgrannis 2013-07-29 04:06:57

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

然后遍历它们，并且如果它是从getElementById之前获得的div，则对于每个设置样式为block否则为none。

（我建议类添加到所有与此有关的div，并只考虑迭代过程中使用这个类的div，从而使页面的unrelevant部分将不会受到影响。）

来源

2011-12-28 12:12:42 Kos

以下代码会隐藏所有的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)更清晰且更易于理解。它解决了你的问题吗？

来源

2011-12-28 12:13:32 Deleteman

有什么关键的区别，如果你的任何和接受之间nswer？任何速度相关的差异？ – pal4life 2014-11-07 21:23:58

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

来源

2011-12-28 12:21:56 biophonc

好点。虽然有轻量级的解决方案，http://polyfilljs.com/polyfills/getelementsbyclassname.html – Kos 2011-12-28 12:29:42

是的，但不适用于ie7，他然后会需要这个：http://polyfilljs.com/polyfills/queryselector。 HTML;） – biophonc 2011-12-28 12:35:16

JavaScript - 隐藏所有其他divs

回答

相关问题