javascript 显示/隐藏特定的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5888436/
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
Show/hide specific divs
提问by Adam
I'm a bit of a JavaScript newbie, but I do know SOME basics, so I thought I could handle this. I'm trying to show specific DIVS when a page loads, but have them easily hideable when another DIV is clicked on.
我是一个 JavaScript 新手，但我知道一些基础知识，所以我想我可以处理这个。我试图在页面加载时显示特定的 DIVS，但在单击另一个 DIV 时可以轻松隐藏它们。
I found something similar to this code somewhere and started with it:
我在某处找到了类似于此代码的内容并开始使用它：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<a href="#" onclick="show('box1'); hide('boxlink1')" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1">
<p>Text of box 1</p>
</div>
<a href="#" onclick="show('box2'); hide('boxlink2')" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
<a href="#" onclick="show('box3'); hide('boxlink3')" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
<a href="#" onclick="show('box4'); hide('boxlink4')" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Great. This already does MOST of what I want it to do, except that I want it to re-show the hidden box titles when you click on a new box title, and hide the content of any box that is open.
伟大的。这已经完成了我想要它做的大部分事情，除了我希望它在您单击新的框标题时重新显示隐藏的框标题，并隐藏任何打开的框的内容。
So I tried this:
所以我试过这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<a href="#" onclick="show(['box1','boxlink2','boxlink3','boxlink4']); hide(['boxlink1','box2','box3','box4'])" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1">
<p>Text of box 1</p>
</div>
<a href="#" onclick="show(['box2','boxlink1','boxlink3','boxlink4']); hide(['boxlink2','box1','box3','box4'])" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;">
<p>Text of box 2</p>
</div>
<a href="#" onclick="show(['box3','boxlink1','boxlink2','boxlink4']); hide(['boxlink3','box1','box2','box4'])" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;">
<p>Text of box 3</p>
</div>
<a href="#" onclick="show(['box4','boxlink1','boxlink2','boxlink3']); hide(['boxlink4','box1','box2','box3'])" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;">
<p>Text of box 4 </p>
</div>
</body>
</html>
Which causes NOTHING to work. I'm guessing I have some syntax wrong or something, but I'm not sure what it is. I tried it a few different ways. I've seen multiple things called that way before.
这导致没有任何工作。我猜我有一些语法错误或什么的，但我不确定它是什么。我尝试了几种不同的方法。我以前见过很多这样称呼的东西。
If anyone can help me, I'm guessing it's a pretty simple solution. Thanks in advance.
如果有人可以帮助我，我猜这是一个非常简单的解决方案。提前致谢。
回答by Michael D
Your showand hidefunctions are not designed to handle arrays of variables. You will need to cycle through an array that you feed to the function and hide/show each element in it.
您的show和hide函数并非旨在处理变量数组。您将需要循环访问您提供给函数的数组并隐藏/显示其中的每个元素。
So your showfunction will look something like this:
所以你的show函数看起来像这样：
function show(ids) {
for(var i=0, l=ids.length; i < l; i++ } {
document.getElementById(ids[i]).style.display = 'block';
}
}
回答by Dutchie432
You are passing arrays to your functions and they are being processed as strings. I just changed that, and leveraged jQuery language instead of the lengthy JavaScript language. See a working Sample.
您正在将数组传递给您的函数，并将它们作为字符串进行处理。我只是改变了它，并利用了 jQuery 语言而不是冗长的 JavaScript 语言。请参阅工作示例。
JS
JS
function show( id ) {
for (var x=0; x<id.length; x++)
$('#' + id[x]).show();
}
function hide( id ) {
for (var x=0; x<id.length; x++)
$('#' + id[x]).hide();
}
UPDATE
更新
my bad. Could have sworn I saw a jQuery tag.
my bad. Could have sworn I saw a jQuery tag.
回答by neebz
function show( ids ) {
foreach (id in ids){
document.getElementById(id).style.display = 'block';
}
}
function hide( ids ) {
foreach (id in ids){
document.getElementById(id).style.display = 'none';
}
}
