使用 Jquery 在按钮单击时隐藏/显示 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33251749/
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/Show Div on button click using Jquery
提问by Vini
This is supposed to be my first Jquery code that I am writing. I have used thisand many more examples to make the simplest jquery code to display Hello on Button Click(W3Schools worth mentioning). I am trying to show a div that contains the Hello in it on a button click.
这应该是我正在编写的第一个 Jquery 代码。我已经使用这个和更多的例子来制作最简单的 jquery 代码来在按钮点击时显示你好（W3Schools 值得一提）。我试图在单击按钮时显示一个包含 Hello 的 div。
<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>
<div id="Create" style="visibility:hidden">
Hello
</div>
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$(btn).click(function () {
$(Create).show();
});
});
</script>
}
I have tried writing the Script code many places like in the head, after the Scripts.Render, before it. I am not really sure where i should place the Jquery code.
我已经尝试在很多地方编写脚本代码，比如在 Scripts.Render 之后，在它之前。我不太确定应该将 Jquery 代码放在哪里。
I have this code appended to a MVC5 application. This code is written for learning purpose. I think the other code in the View is irrelevant for the working of the Jquery.
我将此代码附加到 MVC5 应用程序。此代码是为学习目的而编写的。我认为视图中的其他代码与 Jquery 的工作无关。
回答by Maha Dev
<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>
<div id="Create" style="display:none">
Hello
</div>
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$("#Create").toggle();
});
});
</script>
}
回答by Amaresh Tiwari
You Ca Check it here http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
你可以在这里查看 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
