javascript - HTML 未动态加载到 Div 中

Question

我已经能够使用 Load HTML page dynamically into div with jQuery 提供的答案在过去将 html 完美地加载到 div 中，然而，我开始了一个基于 codrops 模板的新元素 (multi-level push menu) ，页面不会加载到指定的 .content div

网页是 here 。我已经加载了所有正确的 jquery 库，并且测试页面“bio.html”的路径正确。

我正在专门处理第一个 ul li 菜单列表链接 “传记”，以测试它的功能。

我在 jquery 中使用的代码是

$(document).ready(function(){
    $("#bio").click(function(){
        $('.content').load('bio.html');
        //alert("Thanks for visiting!");
    }); 
});

选择器“#bio”已应用于

<li><a class="icon icon-male" id="bio">Biography</a></li>

在 index.html 中。在 class="content"div 标签中，我将它的 css 设置为

.content {
    color: white;
    background: rgba(0,0,0,0.9);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
    width: 60%;
    border-radius: 2px;
    padding: 3em 2em;
    max-width: 1200px;
    max-height: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}

我不知道上面的代码是否干扰了单击处理程序时不允许页面动态加载的内容。我确实从 class="content clearfix" 对 class="content" 进行了更改，因为我目前不太关心使用 clearfix hack，这是在原始 codrops html 中识别元素的唯一变化。

Answer 1

您在脚本之后调用了 jQuery 库，先调用 jQuery，然后再调用脚本

我鼓励您使用 1.9.0 或更高版本。