将链接加载到DIV中

Question

我已经创建了一个菜单，它只是一系列DIVs，并使用以下代码

$(".menu_item").click(function(){
    window.location = $(this).attr("data-href");
return false;
});

使每个项目的整个DIV都可点击。我有一个“容器”的DIV设置，内容最初通过php-include加载，但希望当不同的菜单项被点击时加载不同的内容。

我知道我可以使用JQuery.load将外部文件加载到特定的DIV中，但这似乎意味着为每个链接编写单独的jquery实例？如果可能的话，我更愿意坚持使用php include。我可以使用jquery.load通过php include加载吗？

任何关于如何实现这一点的帮助都将不胜感激。

下面是代码的其余部分：

/* Menu Item */
<div class="menu_item" data-href="link1.html">
     Link 1
</div>

/* Container to load link into */         
<div id="myContentDiv"></div>

Answer 1

您可以使用jQuery AJAX速记方法load()，该方法发出ajax请求，并在完成时用响应填充元素

$(".menu_item").click(function(e){
   var url= $(this).data('href')
    $('#myContentDiv').load( url);
     return false;/* edit to prevent browser following link*/
  });

接口参考：http://api.jquery.com/load/

Answer 2

  $(".menu_item").click(function(e){
    e.preventDefault();
    $.ajax({
      url: $(this).attr("data-href"),
      context: $('#div-to-replace-content')
    }).done(function(data){
      $(this).append(data);
    });
  });