使用 Javascript 显示 1 个 div 并在单击时隐藏所有其他 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22465919/
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 1 div and hide all others on click using Javascript
提问by user13286
I am setting up a "bio" section on my site and I have 3 images of employees and 3 divs with each of the employees bios below. I want to hide all the bios by default and then display only the div associated with the image that is clicked and hide all other divs.
我正在我的网站上设置一个“简历”部分，我有 3 张员工图片和 3 个 div，每个员工的简历都在下面。我想默认隐藏所有 bios，然后只显示与单击的图像关联的 div 并隐藏所有其他 div。
Currently it seems like it's not finding the elements because I am getting "undefined"
目前似乎没有找到元素，因为我得到了“未定义”
Here is my HTML so far:
到目前为止，这是我的 HTML：
<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>
And my Javascript:
还有我的 Javascript：
function showhide(id){
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hide");
for(var div in divs) {
div.style.display = "none";
}
divid.style.display = "block";
}
return false;
}
JSFiddle
JSFiddle
Any ideas? Thanks!
有任何想法吗？谢谢！
回答by Patrick Evans
Use a regular forloop as a for inloop will loop over the other properties of the NodeList and not just over the list of elements
使用常规for循环作为for in循环将遍历 NodeList 的其他属性，而不仅仅是遍历元素列表
function showhide(id){
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hide");
for(var i=0;i<divs.length;i++) {
divs[i].style.display = "none";
}
divid.style.display = "block";
}
return false;
}
回答by Dr. McKay
When using for(var div in divs), divis notthe element. This notation is used when iterating JSON objects.
当使用for(var div in divs)，div是不元素。迭代 JSON 对象时使用此表示法。
You want to use this instead:
你想改用这个：
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
回答by suraj kumar
try this, it is a working code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.share-list {
display:none;
}
</style>
</head>
<body>
<div onclick="shareListHideShow('t1')">
temp1
<div class="share-list" id="t1">t1</div>
</div>
<div onclick="shareListHideShow('t2')">
temp2
<div class="share-list" id="t2">t2</div>
</div>
<div onclick="shareListHideShow('t3')">
temp3
<div class="share-list" id="t3">t3</div>
</div>
<div onclick="shareListHideShow('t4')">
temp4
<div class="share-list" id="t4">t4</div>
</div>
<div onclick="shareListHideShow('t5')">
temp5
<div class="share-list" id="t5">t5</div>
</div>
<div id="out"></div>
<script>
//window.onload = myfunc();
function shareListHideShow(actionId){
var divs = document.getElementsByClassName("share-list");
for(var i=0;i<divs.length;i++) {
if(divs[i].id == actionId){
if(divs[i].style.display === "block"){
divs[i].style.display = "none";
}else{
divs[i].style.display = "block";
}
}
else
divs[i].style.display = "none";
}
}
</script>
</body>
</html>
