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

<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;
} 

但它只显示logodiv 并单击Enter Website链接什么也不做。

我想要做的是显示logodiv 直到页面加载（window.load）并隐藏输入网站链接。加载页面后，显示链接，单击该链接将显示contentdiv

Answer 1

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

onclick从标记中删除并使用

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

或更改为：

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

}

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

Answer 2

尝试这个：

$(window).load(function () {
    $('#enter').show();
});
$(document).ready(function () {
    $("#enter").click(function () {
        $("#content").show(2000);
    });
});

在这里拉小提琴。