-1

使用 JavaScript 或 jQuery 在 div 标签内动态加载 html 页面。

<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('C:/xampp/htdocs/ex1.html');
    });
});
</script>
<body>
<input type="button" id="btn" value="Load" />
<div id="d_content">
</div>
</body>
</html>

但它不起作用..

4

6 回答 6

9

您遇到的问题是 javascript 将page.html其视为对象，访问 property html。你需要做的是引用字符串，所以它被视为它的意图..作为一个字符串：

$('#div_content').load('page.html');

更新1：

首先，您上面的内容称为jQuery。jQuery 是一个 javascript 库，您必须在 head 标记中包含它，然后才能使用任何 jquery 对象的方法：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

您必须在文档头中包含上述行，才能访问 jQuery$对象的方法和属性。

您目前没有这样做的事实是您的代码被破坏并拒绝工作的原因。此外，根据您的设置，您可能希望自己提供 jquery 文件，在这种情况下，您将下载它并将其放在服务器上的某个位置。

其次，C:\不是你的网络根。 localhost是的，因此要使该位起作用，您必须使用“ex1.html”的网址。而已。由于您的文档已经在网络根目录中（或者至少我认为是），它应该可以访问任何相邻文件......否则..

假设您的索引文件在 htdocs 中。然后，您的索引 url 将是localhost/index.ext（ext 是您使用的任何文件扩展名）。然后ex1.html在另一个文件夹中，比如“folder1”。要在您的 jquery 代码中正确访问它folder1/ex1.html...

最后，脚本标签要么出现在头部，要么出现在主体中。不是两者都出现。

于 2013-03-10T07:29:57.500 回答
2 
$(document).ready(function(){
    $('#btn').click(function(){   
        $('#div_content').load('html.page');
     });
});
于 2013-03-10T07:19:44.030 回答
2 
$('#div_content').load("page.html");
于 2013-03-10T07:20:10.437 回答
0

尝试这个：

$(document).ready(function(){
$('#btn').click(function(){
$.get('page.html').success(function(data)
 {
     $('#div_content').html(data);
 });
 });
 });

替换page.html为您的页面

于 2013-03-10T07:20:16.737 回答
0

尝试这个..

$(document).ready(function(){
    $('#btn').click(function(){   
       $('#div_content').html('page.html');
    });
});
于 2013-03-10T07:20:28.357 回答
0

main.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Untitled Document</title>
</head>
<script>

function check(){
$('#tar').load('test.html #target');  // here 'test.html' is a page and 'target' id a id of 'test.html'
}
  </script>

<body>
<input type="button" id="btn" value="Go"  onclick="check();"/>
<div id="tar">
</div>
</body>
</html>

测试.html

<html>
<head></head>
<body>
<div id='target'>
 I am from test page.
</div>
</body>
</html>

在这里我写了 2 个 html 程序。问题仅发生在功能上。我纠正了这一点，现在它工作得很好。我们也可以加载 txt 文件：示例：

function check(){
    $('#tar').load('test.txt');  // here 'test.txt' is a text file
    }
      </script>
于 2013-03-12T13:33:52.973 回答