Question

所以我有一个菜单：

<nav id="side-nav">
<ul>
<li><a href="consulting">Consulting</a></li>
etc..

jQuery读取

$(document).ready(function() {
  $( "#side-nav ul li a" ).on( "click",function() {
   $('#services-content').load('side-menu.html #' + $(this).attr('href'));
    return false;
  });
});

并且有一个html文件，其中包含与href对应的id。它没有加载。我认为我按照jquery网站完全按照。怎么了？

即使我对它进行了硬编码，也没有加载任何内容：

<div id="services-content">

</div><!--load services content in here-->

<script type="text/javascript">
   $(document).ready(function() {
     $('#services-content').load('side-menu.html #consulting');
   });
</script>

Answer 1

阅读Local files doesn't load with Ajax in Chrome but Work on Firefox

您是否在您的计算机上本地工作，没有任何网络服务器？ Chrome不允许通过文件系统中的AJAX加载文件（请参阅bugreport）。

您可以使用XAMPP或类似的东西通过本地网络服务器提供文件。

如果您使用的是Windows，XAMPP可能是启动并运行本地网络服务器的最简单方法：http://www.apachefriends.org/en/xampp.html

在Mac上，您也可以使用MAMP http://www.mamp.info/en/index.html

如果您使用--allow-file-access-from-files启动Chrome，也可以强制Chrome允许在Windows上进行本地文件访问，更多信息请参见this stackoverflow question

Answer 2

看起来像是一个范围问题。我没有测试过，所以不要开枪。

$(document).ready(function() {
  $( "#side-nav ul li a" ).on( "click",function(e) {
    e.preventDefault();

    var $this = $(this);
    $('#services-content').load('side-menu.html#' + $this.attr('href'));
  });
});

使用jQuery加载页面片段

2 个答案: