我之前从不使用jQuery,但我会解释我想要做的事情。
的index.html
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<!-- <iframe width="100%" height="175" frameborder="0" scrolling="no" src="navbar.html"></iframe> I used to use this - but i cant have dropdown menus. -->
<!-- This is my problem -->
<script>
$('#navbar').load('./navbar.html');
</script>
<noscript>
<h1>Please enable Javascript!</h1>
</noscript>
<div id="container">
<!-- Content Here -->
</div>
</body>
</html>
navbar.html
<div id="navbar">
<li><object width="64" height="64" data="favicon.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/tech.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/games.svg" type="image/svg+xml"></object></li>
<li><object width="64" height="64" data="icons/contact.svg" type="image/svg+xml"></object></li>
</div>
所以我在这里尝试做的是,有很多HTML页面都是链接到一个navbar html页面,所以当我更改navbar.html时,我不必更改每一页。
我已经有了另一个问题here。 Davor Milnaric建议&#34;如果您使用的是jquery,则可以尝试使用&#39; .load()&#39;功能。 api.jquery.com/load"但是我无法让它发挥作用。我究竟做错了什么?我如何解决它?任何帮助将不胜感激。
答案 0 :(得分:8)
你需要做两件事:
使用$(document).ready() - read here;所有jQuery代码必须像这样包装:
$(document).ready(function(){
//jquery code goes here....
});
更改
$('#navbar').load('./navbar.html');
到
$('#container').load('./navbar.html');
..你没有id =“navbar”的元素 并根据this:
如果选择器没有匹配任何元素 - 在这种情况下,如果文档不包含id =“result”的元素(在我们的例子中是“navbar”) - Ajax请求将不被发送。
答案 1 :(得分:3)
您也可能需要等待DOM加载。
<script>
$(document).ready(function() {
$('#result').load('navbar.html #navbar', function() {
alert("loaded");
});
});
</script>
<div id="result">
</div>