Question

我是一个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>

导致NOTHING无法正常工作。我猜我有一些语法错误或者什么，但我不确定它是什么。我尝试了几种不同的方法。我之前见过很多事情。

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

Answer 1

您的show和hide函数不是为处理变量数组而设计的。您将需要遍历一个您提供给该函数的数组，并隐藏/显示其中的每个元素。

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

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

Answer 2

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

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

<强>更新

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

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

显示/隐藏特定的div

3 个答案: