在使用 id 与类名时,有一个非常好的经验法则。如果您要在模板中多次使用它,请将其设为一个类。在 main、login、header 或 footer 的情况下,Id 可以正常工作,但在这里我会使用一个类。
现在这不是导致您的问题的原因,但我想我会指出这一点。您的问题可能是因为选择器试图找到尚不存在的东西。你有2个选择
1.) 将您的脚本移动到页面底部
2.) 将您的代码包装在一个就绪函数中(仅在 dom 就绪后执行。
这是带有我的建议的更新代码示例
<!DOCTYPE HTML>
<html>
<head>
<title>Click Handler</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.close').click(function(){
$('#main').show();
$('#login').hide();
});
})
</script>
</head>
<body>
<div style="float:right;"><a href="#" class="close">Close <img src="assets/close.png" class="close"></a></div>
<div id="main" style="display:none;">Main</div>
<div id="login">Login</div>
</body>
</html>