如何用js实现点击左侧菜单栏时右侧div刷新的功能（即局部刷新功能）

Question

最近要实现一个功能，参考了其他人的代码，但是发现好像有问题，又找不到源代码了，求大神指点代码到底哪里有问题，如何实现点击菜单栏时，右侧的div进行刷新重复加载
 <ul class="children">
        <li onclick="click"><a href="#!/dashboard" data-id="revenueDay" >日營收</a></li>
          <li onclick="click"><a href="#!/budata" data-id="buData" >By Bu Report</a></li>
</ul>
 <div id="report" class ="marginshow" style="margin-top:45px; z-index:9999;" ng-view>
  </div>
$(function(){    $(".children").on("click","li",function(){
        var sld = $(this).data("id");
        window.location.hash = sld;
        loadlnner(sld);
    });
    function loadlnner(sld){
        var sld = window.location.hash;
        var pathn,i;
        switch(sld){
          case"#revenueDay":
              pathn = "dashboard.htm";
              i=0;
              break;
          case"#buData":
              pathn = "budata.htm";
              i=1;
              break;
          default:
          pathn = "dashboard.htm";
              i=0;
              break;
      }
      $("report").load(pathn);
    }
    var sld = window.location.hash;
    loadlnner(sld);
});

Answer 1

看到没人回答，我就试着说一下。
我从来没用过jquery，我就用我的javascript知识分析一下。
1，利用hash无刷新导航，兼容古老的IE。应该要用到ajax，但你的代码中没有。2，建议：你可以用pushState，jquery有pjax插件。
说说你的代码。 $("report").load(pathn);这report前似乎少了#（当然我没用过jquery），再有load(pathn)，查了下，load是个事件绑定，参数应该是个函数调用，你却传了个字符串。那么我改一下，当然我没用jquery写过任何代码，只是分析讨论。
 $("#report").load(function(pathn){
var xhr = $.ajax({url:pathn});
this.innerHTML = xhr.resopnseText;
});

Answer 2

你的html文件是放在服务端吗？查了一下jquery的官方文档load的使用方法，是获取服务端的数据，不知道对你有没有参考意义。

Answer 3

谢谢大家，我刚开始听取一楼意见，把report前面加了#，又改进了代码，发现谷歌浏览器可以正常使用，但是ie不兼容。调试后发现，可能是因为我用的angularjs的框架里的路由，导致冲突。现在已经解决了，可正常实现功能，晚些时候把代码贴上来，麻烦大家了