Javascript 隐藏/显示图层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5327718/
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
Javascript hide/show layers
提问by Amy
I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.
我正在使用 javascript 隐藏和显示 div，基本上我想显示一个 div，然后当单击按钮时隐藏该 div 并显示另一个。我不能完全弄清楚这里的 javascript 是我目前拥有的，但是当我单击隐藏时第二层没有显示。
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'hidden';
document.getElementById('topbar').style.visibility = 'visisble';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'hidden';
document.topbar.visibility = 'visible';
}
else { // IE 4
document.all.layer.style.visibility = 'hidden';
document.all.topbar.style.visibility = 'visible';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'visible';
document.getElementById('topbar').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'visible';
document.topbar.visibility = 'hidden';
}
else { // IE 4
document.all.layer.style.visibility = 'visible';
document.all.topbar.style.visibility = 'hidden';
}
}
}
</script>
and css:
和CSS：
#topbar {
background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}
#show {
float: right;
padding-right: 40px;
padding-top: 10px;
}
#hide {
float: right;
padding-right: 40px;
}
#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}
using standard html links like:
使用标准的 html 链接，如：
<a href="javascript:hidediv()">Hide</a>
Any help would be appreciated, cheers!
任何帮助将不胜感激，干杯！
EDIT
编辑
okay switched to something completely new but it seems to not show after hiding
好的切换到全新的东西，但隐藏后似乎不显示
<script type="text/javascript">
$(function(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });
$(function(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });
and
和
<a href="javascript:void(0);" id="showhide">Show/Hide</a>
and
和
<div id="layer"></div>
采纳答案by rayhan
This will probably help you: http://api.jquery.com/hide/or the http://api.jquery.com/toggle/.
这可能会对您有所帮助：http://api.jquery.com/hide/或http://api.jquery.com/toggle/。
EDIT:
编辑：
I am hoping that following example will help you.
我希望下面的例子会对你有所帮助。
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#a").toggle();
$("#b").toggle();
});
});
</script>
</head>
<body>
<div id="a">
I am a.
</div>
<div id="b" style="display: none">
I am b.
</div>
<div id="button">
<button>Show/Hide</button>
</div>
</body>
</html>
回答by TJHeuvel
You dont need jQuery for this.
为此，您不需要 jQuery。
Your functions could look like this:
您的函数可能如下所示：
function hideElement(elementId)
{
document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
document.getElementById(elementId).style.display = 'block';
}
Then on page load, or in the css you can hide the first div. When the click happens you can then use showElementto show it.
然后在页面加载时，或在 css 中，您可以隐藏第一个 div。当点击发生时，您可以使用showElement它来显示它。
