javascript - 如何在div内容中显示另一个html

Question

我有一个固定左侧菜单栏，在 layout.html 页面中有 5 个菜单。每个 li 包含单独的 html 文件。
我正在从外部 HTML 加载 .body-content。
我的疑问是当我单击菜单列表时，有关内容应显示在正文内容内。但在我的代码中，它导航到新页面。我知道这是因为我直接给出了 href 的文件路径。
谁能告诉我如何在单击 href 时仅更改 .body-content 数据？

布局.html

<ul class="nav main-menu">
  <li class="dropdown" ng-repeat="parent in menu">
    <a href="home.html" class="dropdown-toggle">                  
      <i class="fa fa-tachometer"></i>
      <span class="hidden-xs">Dashboard</span>
    </a>                        
  </li>
  <li class="dropdown" ng-repeat="parent in menu">
    <a href="usermanagement.html" class="dropdown-toggle">                  
      <i class="fa fa-calendar"></i>
      <span class="hidden-User Management</span>
    </a>
  </li>
</ul>

<div id="content">
  <div class="body-content">                                     
  </div>  
</div>

home.html

<h2>Sample content</h2>
<p>This HTML tutorial contains hundreds of HTML examples.

With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>

用户管理.html

<h2>Sample content</h2>
<p>jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.</p>

Answer 1

只需使用以下 jquery (ajax) 函数加载给定 div 中另一个页面的 html，您也可以在页面 onload 或任何事件上调用此函数。

    $(function() {
       $(".dropdown > a").click(function(e){
          $( ".body-content" ).load( "usermanagement.html", function() {
            alert( "page content has been loaded" );
          });
       });
    }

看来您在代码中使用了 AngularJS，您还可以使用 ng-include 来加载 html 页面内容，如下所示，

<div class="body-content" ng-include="usermanagement.html"></div>