Html 单击按钮时如何隐藏/显示 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16308779/
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
How can I hide/show a div when a button is clicked?
提问by Julia
I have a divthat contains a register wizard, and I need hide/show this divwhen a button is clicked.
How can I do this?
我有一个div包含注册向导的，我需要div在单击按钮时隐藏/显示它。我怎样才能做到这一点？
Below I show you the code.
下面我给大家展示一下代码。
Thanks :)
谢谢 ：）
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3"> </td>
</tr>
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span> </td>
</tr>
</table>
</div>
回答by wellers
Use JQuery. You need to set-up a click event on your button which will toggle the visibility of your wizard div.
使用 JQuery。您需要在按钮上设置一个单击事件，该事件将切换向导 div 的可见性。
$('#btn').click(function() {
$('#wizard').toggle();
});
Refer to the JQuerywebsite for more information.
有关更多信息，请参阅JQuery网站。
This can also be done without JQuery. Using only standard JavaScript:
这也可以在没有 JQuery 的情况下完成。仅使用标准 JavaScript：
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Then add onclick="toggle_visibility('id_of_element_to_toggle');"to the button that is used to show and hide the div.
然后添加onclick="toggle_visibility('id_of_element_to_toggle');"到用于显示和隐藏 div 的按钮。
回答by xpt
This works:
这有效：
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
} <!DOCTYPE html>
<html>
<body>
<a href="javascript:showhide('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
</body>
</html>回答by Jarek Jakubowski
This can't be done with just HTML/CSS. You need to use javascript here. In jQuery it would be:
仅使用 HTML/CSS 无法做到这一点。你需要在这里使用javascript。在 jQuery 中，它将是：
$('#button').click(function(e){
e.preventDefault(); //to prevent standard click event
$('#wizard').toggle();
});
回答by dimitryous
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>
回答by Jlcanizales
$('#btn').click(function() {
$('#wizard').toggle();
});
if you want to begin with the divhidden, you should add style="display:none;", like this:
如果你想从div隐藏开始，你应该添加style="display:none;"，像这样：
<div style="display:none;"> </div>
回答by Calaf
The following solution is:
以下解决方案是：
- briefest. Somewhat similar to here. It's also minimal: The table in the DIV is orthogonal to your question.
- fastest:
getElementByIdis called once at the outset. This may or may not suit your purposes. - It uses pure JavaScript (i.e. without JQuery).
- It uses a button. Your taste may vary.
- extensible: it's ready to add more DIVs, sharing the code.
- 最简短的。有点类似于这里。它也是最小的：DIV 中的表格与您的问题正交。
- 最快：
getElementById一开始被调用一次。这可能适合也可能不适合您的目的。 - 它使用纯 JavaScript（即没有 JQuery）。
- 它使用一个按钮。你的口味可能会有所不同。
- 可扩展：已准备好添加更多 DIV，共享代码。
mydiv = document.getElementById("showmehideme");
function showhide(d) {
d.style.display = (d.style.display !== "none") ? "none" : "block";
}#mydiv { background-color: #ddd; }<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
This div will show and hide on button click.
</div>回答by Matthew Henson
You can do this entirely with html and css and i have.
你可以完全用 html 和 css 来做到这一点，我有。
HTMLFirst you give the div you wish to hide an IDto target like #view_elementand a class to target like #hide_element. You can if you wish make both of these classes but i don't know if you can make them both IDs. Then have your Show button target your show id and your Hide button target your hide class. That is it for the html the hiding and showing is done in the CSS.
HTML首先你给你想要隐藏的 div 一个IDto target like#view_element和一个 class to target like #hide_element。如果您希望同时制作这两个课程，您可以，但我不知道您是否可以制作它们两个 ID。然后让你的 Show 按钮定位你的 show id，你的 Hide 按钮定位你的 hide 类。这就是 html 的隐藏和显示是在 CSS 中完成的。
CSSThe css to show and hide this should look something like this
CSS显示和隐藏它的 css 应该是这样的
#hide_element:target {
display:none;
}
.show_element:target{
display:block;
}
This should allow you to hide and show elements at will. This should work nicely on spans and divs.
这应该允许您随意隐藏和显示元素。这应该在跨度和 div 上很好地工作。
回答by JarnoV
Task can be made simple javascript without jQuery etc.
任务可以在没有 jQuery 等的情况下制作成简单的 javascript。
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
This function is simple if statement that looks if wizardhas class swMainand change class to swHideand else if it's not swMainthen change to swMain. This code doesn't support multiple class attributes but in this case it is just enough.
这个函数是一个简单的 if 语句，它查看向导是否有类swMain并将类更改为swHide，否则如果它不是swMain 则更改为swMain。这段代码不支持多个类属性，但在这种情况下它就足够了。
Now you have to make css class named swHidethat has display: none
现在你必须创建一个名为swHide 的css 类，它具有display: none
Then add on to the button onclick="showhide()"
然后添加到按钮onclick="showhide()"
So easy it is.
就这么简单。
