我已经能够使用Load HTML page dynamically into div with jQuery提供的答案在过去完美地将html加载到div中,然而,我已经启动了一个基于codrops模板的新项目{{3 ,页面不会加载到指定的 .content div
网页 (multi-level push menu) 。我已经加载了所有正确的jquery库,并且测试页“bio.html”被正确地修改了。
我正在非常专注于第一个 ul li 菜单列表链接“传记”,以便测试它的功能。
我在jquery中使用的代码是
$(document).ready(function(){
$("#bio").click(function(){
$('.content').load('bio.html');
//alert("Thanks for visiting!");
});
});
选择器“#bio”已应用于
index.html中的
<li><a class="icon icon-male" id="bio">Biography</a></li>
。在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,这是识别原始密码html中元素的唯一变化。
答案 0 :(得分:1)
你在脚本之后调用了jQuery库, 首先调用jQuery,然后调用脚本
我建议您使用1.9.0或更高版本。
答案 1 :(得分:0)
查看你的链接,你的代码之后你正在加载你的jquery文件,因为'$'没有被定义,你的jquery库会移动到它之上,它应该开始工作。