显示/隐藏特定的 div答案

【问题标题】：Show/hide specific divs显示/隐藏特定的 div
【发布时间】：2011-05-04 18:52:07
【问题描述】：

我是一个 JavaScript 新手，但我确实知道一些基础知识，所以我认为我可以处理这个问题。我试图在页面加载时显示特定的 DIVS，但在单击另一个 DIV 时让它们很容易隐藏。

我在某处发现了类似于此代码的内容并开始使用它：

<!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>

太好了。这已经完成了我想要它做的大部分工作，除了我希望它在您单击新框标题时重新显示隐藏的框标题，并隐藏任何打开的框的内容。

所以我尝试了这个：

<!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>

这导致没有任何工作。我猜我有一些语法错误或什么，但我不确定它是什么。我尝试了几种不同的方法。我以前见过很多这样的东西。

如果有人可以帮助我，我猜这是一个非常简单的解决方案。提前致谢。

【问题讨论】：

document.getElementById 需要一个字符串作为参数，但您传递的是一个数组。你必须遍历数组。

标签： javascript html toggle hide show-hide

【解决方案1】：

您的show 和hide 函数并非设计用于处理变量数组。您将需要循环遍历您提供给函数的数组并隐藏/显示其中的每个元素。

所以你的show 函数看起来像这样：

function show(ids) {
    for(var i=0, l=ids.length; i < l; i++ } {
         document.getElementById(ids[i]).style.display = 'block'; 
    } 
}

【讨论】：

【解决方案2】：

您正在将数组传递给您的函数，并且它们被作为字符串处理。我只是改变了这一点，并利用了 jQuery 语言而不是冗长的 JavaScript 语言。 See a working Sample.

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(); 
}

更新

my bad. Could have sworn I saw a jQuery tag.

【讨论】：

不一定是坏事。 jQuery 很适合开始做这类事情。它可以保护您免受浏览器的疯狂。您可以在必要时使用低级浏览器 API 调用。所以在我看来，使用 jquery 选择器和 .hide/.show...

【解决方案3】：

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'; 
   }
}

【讨论】：