Question

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

$(".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*/
  });

API参考：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);
    });
  });

定位链接以在DIV内加载

2 个答案: