Question

所以我看到很多人都在问如何将html加载到div中，而且我的代码做得很好....但是当我将html加载到div中时，页面的其余部分会发生变化。

我有一个看起来像这样的页面a.html，并加载了b.html

a.html

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 



 <div id="includedContent"></div>
 <h1>This is why I rule</h1>
</head>
</html>

然后b.html看起来像这样

<p> This is my include file </p>

a.html加载会发生什么，我可以暂时看到This is why I rule，但随后代码会消失并获得b.html。当b.html加载时，我只能看到This is my include file和'这就是为什么我的规则'消息消失...

这是为什么？我该如何预防呢？它在我测试过的所有浏览器上执行此操作。

Answer 1

您必须将html代码写入<body> </body>

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 
</head>

<body>
 <div id="includedContent"></div>
 <h1>This is why I rule</h1>
</body>
</html>

Answer 2

您的所有HTML标记都在head部分，而不是body

试试这个：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 

</head>
<body>
     <div id="includedContent"></div>
     <h1>This is why I rule</h1>
</body>
</html>

将html加载到div而不更改页面的其余部分

2 个答案: