javascript - 显示加载页面无法正常工作

Question

我有这个标记:

<div class="container" id="logo" style="text-align:center;">
  //other loading stuff
  <a href="" id="enter" onclick="EnterSite()">Enter Website</a>
</div>  

<div id="content">
 //main content
</div>    

在结束head标签之前的top，我有:

<script>
    $(function() {
        $('#enter').hide();
    });
    $(window).load(function() {
        $('#enter').show();
    });
</script>  

在底部我有(在结束 body 标记之前):

function EnterSite() {
        $("#enter").click(function(){
            $("#content").show(2000);
        });
    }  

和CSS:

#logo {
  z-index: 99;
}
#content {
   display: none;
} 

但它只显示 Logo div，单击输入网站链接不会执行任何操作。

我想要做的是显示 Logo div，直到页面加载(window.load)并隐藏输入网站链接。页面加载后显示链接，单击该链接将显示 content div

Answer 1

问题是您正在使用 onclick handler，使用 jQuery 绑定(bind)新的单击处理程序。第一次单击 <a> 时，新的单击处理程序不会触发标记，因为事件已经发生。

删除onclick来自标记并使用

$(function(){
  $("#enter").hide().click(function(){
        $("#content").show(2000);
   });
}) 

或者更改为:

function EnterSite() {       
       $("#content").show(2000);

}

我建议使用第一种解决方案，并避免混合内联脚本和 jQuery，以使所有脚本不引人注目且更易于维护