2014-05-01 104 views
0

我已经能够使用Load HTML page dynamically into div with jQuery提供的答案在过去完美加载html到div中,但是,我开始的一个新项目是基于codrops模板(multi-level push menu) ,该网页不加载到指定。内容Html没有动态加载Div Div

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

我第一UL李菜单列表的链接“传”对工作非常具体,只是测试它的功能。

我使用在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>

。在类=“内容” 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” from class =“content clearfix”因为我现在不太在意使用clearfix hack,这是识别原始元素的唯一变化codrops html。

+0

我在我的控制台中得到'$未定义',任何人都可以得到相同的结果。 –

+0

是的,'js/linking.js'应该包含在jQuery之后。 – Colandus

+0

我想这可能是因为你有2个不同版本的jQuery(1.4&1.6)的引用。你可以尝试删除其中的一个吗? –

回答

1

你叫jQuery库脚本后, 调用jQuery的第一,那么你的脚本

enter image description here

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

+0

完全固定,也链接到1.9.0谢谢 –

0

看着你的链接,你正在加载你的jQuery文件后,你的代码'$'没有定义移动你的jQuery库上面,它应该开始工作。