gpt4 book ai didi

javascript - 显示/隐藏特定的 div

转载 作者:行者123 更新时间:2023-11-30 18:44:23 25 4
gpt4 key购买 nike

我是一个 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 工作。我猜我有一些语法错误或什么的,但我不确定它是什么。我尝试了几种不同的方法。我以前见过很多这样的东西。

如果有人能帮助我,我想这是一个非常简单的解决方案。提前致谢。

最佳答案

您的showhide 函数不是为处理变量数组而设计的。您需要循环遍历提供给函数的数组并隐藏/显示其中的每个元素。

因此您的show 函数将如下所示:

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

关于javascript - 显示/隐藏特定的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5888436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com