Question

我想在div中加载网页的内容。这是我的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

单击此项目时，网页应加载到内容ID：

中

<ul><li><a id="menu_top" href='testing.html'><span>My account</span></a></li></ul>
<div id="content"> </div>

JS：

$("#menu_top").click(function() {
  var href = $ (this).attr('href');
  alert(href);
  $("#content").load(href);
  return false;
});

testing.html：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head>

<body>
SUCCESS!
</body>
</html>

不幸的是，上面的代码不起作用。我多次检查过，但找不到问题。

Answer 1

@Milind Anantwar是正确的 - 必须有$（document）.ready包装你的JS：

$(document).ready(function(){

  $("#menu_top").click(function() {
    var href = $ (this).attr('href');
    alert(href);
    $("#content").load(href);
    return false;
  });

});

我还测试了UL或OL标签是否影响了@psicopoo提到的，但它在Chrome中似乎没有。 *另外，请确保＆＃34; testing.html＆＃34;是一个有效的加载页面。

*正如http://api.jquery.com/load/所述：＆＃34;由于浏览器安全限制，大多数＆＃34; Ajax＆＃34;请求受same origin policy的约束;请求无法成功从其他域，子域，端口或协议中检索数据。＆＃34;

Answer 2

我认为您正在尝试加载的网页遇到问题。我完全复制了你的代码并且它在Fiddle中工作，看看这是否适合你，如果是的话，它可能是你的页面：

 testing.html

JS小提琴： http://jsfiddle.net/fb4j6y6d/

JQuery .load（）不起作用

2 个答案: