显示/隐藏特定的div

发布于 2024-11-05 17:22:41 字数 3338 浏览 5 评论 0原文

我是一个 JavaScript 新手，但我确实知道一些基础知识，所以我想我可以处理这个问题。我试图在页面加载时显示特定的 DIV，但在单击另一个 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>

这导致什么都不起作用。我猜我有一些语法错误或其他问题，但我不确定它是什么。我尝试了几种不同的方法。我以前见过很多这样称呼的东西。

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

原文

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丶视觉 2024-11-12 17:22:41

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

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

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

Your show and hide functions 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.

So your show function will look something like this:

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

回复收藏 0 原文

胡渣熟男 2024-11-12 17:22:41

您将数组传递给函数，并将它们作为字符串进行处理。我只是改变了这一点，并利用 jQuery 语言而不是冗长的 JavaScript 语言。查看工作示例。

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

更新

我的错。我发誓我看到了一个 jQuery 标签。

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.

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.

回复收藏 0 原文

如梦初醒的夏天 2024-11-12 17:22:41

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

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

回复收藏 0 原文

~没有更多了~