javascript 用按钮隐藏/取消隐藏div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21203526/
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
Hide/unhide div with button?
提问by Justin
<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
当按下聊天按钮时，我想让 div 出现“登录”，当按下 div 内的“关闭登录”按钮时，我想让整个 div 再次隐藏。目前如果没有按下任何按钮，div 应该处于隐藏状态，干杯！
回答by aksu
Use jQuery. No way to do it plain html/css.
使用 jQuery。没有办法做到纯 html/css。
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
如果您没有包含 jQuery，请使用 javascript：
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
回答by Mykhailo Zhuk
Look at my example without using of JavaScript.
在不使用 JavaScript 的情况下查看我的示例。
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
和CSS
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
小提琴http://jsfiddle.net/LUdyb/1/
Hope this help.
希望这有帮助。
回答by logan Sarav
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
在按钮 id 的帮助下使用 javascript，您可以通过将 css 属性更改为可见来隐藏 div。使用 jquery 时，您可以使用切换、隐藏、显示。
回答by untitled
There is no way you can do this in html/css
您无法在 html/css 中执行此操作
You can use Jquery
您可以使用 Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
关闭
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closeloginand the .css('visibility', 'hidden')
您只需要更改 ID#closelogin和.css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
您需要在您的头部或页面底部包含这样的 Jquery 库才能使其工作。
eg:
例如：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
