Question

我在fixed left side menu bar页面中有一个layout.html有5个菜单。每个li都包含单独的html文件。
我从外部HTML加载.body-content。我怀疑是当我点击菜单列表时，关于内容应该显示在正文内容中但在我的代码中导航到新页面。我知道那是因为我把文件路径直接给了href。
任何人都可以告诉我如何更改点击href时只有.body-content数据吗？

的layout.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>

usermanagement.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>

Answer 2

你在寻找什么是AJAX。最好使用ajax()方法，因为load()实际上已弃用，其他用户提及的get()/post()方法可以在ajax()中指定（默认为GET）。
您还需要html()来设置div和preventDefault()方法的内容，以停止发生锚点的默认操作：

$(document).ready(function(){
    $(".dropdown > a").click(function(e){
        e.preventDefault()
        var val = $(this).attr("href")
        $.ajax({
            url: val, 
            success: function(result){
                $(".body-content").html(result);
            }
        });
    });
});

Answer 3

您可以使用$.get()获取数据，并html()将其添加到您的div中。

$.get( "file.html", function( data ) {
  $('.body-content').html( data );
});

为了使菜单动态化，我建议将函数绑定到.main-menu内的所有锚点：

$(function() {
  $('.main-menu a').on('click', function(e) {
    e.preventDefault(); /* prevent the link from opening */
    var url = $(this).attr('href'); /* get the url */
    $.get( url, function( data ) {
      $('.body-content').html( data );
    });
  });
});

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

3 个答案: