JavaScript - 隐藏所有其他 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8655741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript - Hide all other divs
提问by Uli
I've a number of divs that are only visible after clicking a link. How to close all open divs so that only the clicked one is visible?
I'm using this .js:
我有许多 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>
Thanks Uli
谢谢乌利
回答by Gabriele Petrioli
One way is to add a class and seek the elements based on that to hide them (as shown in other answers)
一种方法是添加一个类并基于该类查找元素以隐藏它们（如其他答案中所示）
An alternative is to store the state of the elements in an object and use that to identify the open ones that need closing..
另一种方法是将元素的状态存储在一个对象中，并使用它来识别需要关闭的打开状态。
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');
}
}
Demo at http://jsfiddle.net/gaby/LfzYc/
回答by Kos
You can use document.getElementByTagNameto retrieve all divs.
您可以使用document.getElementByTagName来检索所有 div。
Then iterate over them and for each one set the style to blockif it's the div obtained from getElementByIdbefore, or noneotherwise.
然后迭代它们，并为每个设置样式，block如果它是从getElementById之前获得的 div ，或者none其他。
(I suggest to add a class to all the divs relevant here, and only consider the divs with this class during the iteration, so that unrelevant parts of the page won't be affected.)
（我建议这里所有相关的div都加一个类，迭代的时候只考虑这个类的div，不影响页面不相关的部分。）
回答by Deleteman
The following code will hide all div and show the one you click on...
以下代码将隐藏所有 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>
I also added the return false;to preven the link's default behavior. It's cleaner and easier to understand than using javascript:void(null)on the link's hrefattribute.
Does it solve your issue?
我还添加了return false;以防止链接的默认行为。它比javascript:void(null)在链接的href属性上使用更清晰、更容易理解。它解决了你的问题吗？
回答by biophonc
Using a classname is the typical way to do this but I'd recommend to use a lib like jquery/rightjs/whateveryoulike to do this; because: getElementsByClassName() is not supported by < IE9 and querySelectorAll() not supported by < IE8. If you can not use a lib, then you would need to iterate over all divs via getElementsByTagName("div") and check for that class.
使用类名是执行此操作的典型方法，但我建议使用像 jquery/rightjs/whateveryoulike 这样的库来执行此操作；因为：< IE9 不支持 getElementsByClassName()，< IE8 不支持 querySelectorAll()。如果您不能使用 lib，则需要通过 getElementsByTagName("div") 遍历所有 div 并检查该类。
