Javascript 显示/隐藏 div，使用纯 JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13836848/
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
Show/Hide div, with plain JS
提问by Froxz
My CSS:
我的CSS：
#a_x200{
visibility: hidden;
width: 200px;
height: 200px;
background-color: black;
}
My JS:
我的JS：
<script type="text/javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
}
</script>
My Html
我的 HTML
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>
Not working I think I missed something!
不工作我想我错过了一些东西！
采纳答案by Anthony Grist
You're using visibility: hiddento hide it, then attempting to use the displayCSS property to make it visible. They're two completely separate properties, changing one won't magically change the other.
您正在使用visibility: hidden隐藏它，然后尝试使用displayCSS 属性使其可见。它们是两个完全独立的属性，改变一个不会神奇地改变另一个。
If you want to make it visible again, change the value of the visibilityproperty to visible:
如果要使其再次可见，请将visibility属性值更改为visible：
document.getElementById('a_x200').style.visibility = 'visible';
回答by Artem Veikus
try this:
尝试这个：
document.getElementById('a_x200').style.visibility = 'visible';
回答by simbu94
You can try this code:
你可以试试这个代码：
HTML Code:
<div id="a_x200" style="display:none;">asd</div>
<input type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
Java script:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = "block";
}
</script>
Try this code it will solve your problem.
试试这个代码它会解决你的问题。
回答by t_computer
Here you can se one example i created in jquery Show/Hide using jquery.
在这里，您可以看到我使用 jquery在 jquery Show/Hide 中创建的一个示例。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>?
回答by AMember
your input is miss spled
你的输入是错的
Should be like this:
应该是这样的：
My JS
我的JS
<script type="text/javascript">
function showStuff(a_x200) {
document.getElementById(a_x200).style.display = 'block';
}
</script>
My Html
我的 HTML
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="showStuff('a_x200');"></input>
回答by bipen
try this...
尝试这个...
function showStuff(id) {
document.getElementById(id).style.display = 'block'; // OR
document.getElementById(id).style.visibility = 'visible';
}
edit
编辑
If you notice on your button click onclick="showStuff('a_x200');". you have already sent the id as a parameter to your function.. so i am taking the parameter and using it.
如果您注意到您的按钮，请单击onclick="showStuff('a_x200');"。您已经将 id 作为参数发送给您的函数..所以我正在使用该参数并使用它。
in your case have the parameter but not using it... though it does the samething...
在你的情况下有参数但不使用它......虽然它做同样的事情......
ORu can do this
或者你可以这样做
<input type="button" class="button_p_1" onclick="showStuff();"></input> // omitting double 'n'
function showStuff() {
document.getElementById('a_x200').style.display = 'block';
} // missing curly bracket
this both does the same thing
这两者都做同样的事情
