首先,这是代码JS BIN
代码用于在我在本地运行时使用一个按钮显示和隐藏DIV它不起作用!! ,这是我的HTML代码
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#login_Box_Div{
background:#999;
display:none;
}
</style>
<script>
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
</script>
</head>
<body>
<h3> <a href= "#">Pictio </a> <button id="buttonLogin">LogIn</button></h3>
<div id = "login_Box_Div">
<form name = "myform" >
<input type = "text" name = "username" placeholder = "Username" />
<input type = "password" name = "password" placeholder= "Password" />
<input type = "submit" id = "submitLogin" />
</form>
</div>
</body>
</html>
答案 0 :(得分:3)
浏览器从上到下阅读。当你的jQuery执行时,浏览器还没有找到该元素,所以没有任何反应。将<script>
标记移到页面底部(正文结束标记之前)。或者,您可以将jQuery代码包装在$(document).ready(
中,这会延迟执行,直到整个页面被读取为止。
答案 1 :(得分:0)
替换此 -
<script>
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
</script>
用这个 -
<script>
$(document).ready(function() { // tells jquery that the document is ready to whirl
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
});
</script>
代码放在一个文档就绪处理程序中,它基本上让jQuery知道所有元素都在文档中。一旦他们进入文档,他们就可以通过您编写的代码对其进行操作。如果没有这个处理程序,代码就会运行而不考虑元素是否存在,这可能会导致一些问题。