How to show another html in div content

Question

I have one fixed left side menu bar with 5 menus in layout.html page. each li contains separate html file.
I am loading .body-content from external HTML.
My doubt is when I click on menu list, regarding content should be displayed inside of body content.But in my code its navigating to new page. I know that is because of I gave directly file path to href.
can anyone tell me how to change Only .body-content data at the time of href is clicked?

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

Just use the following jquery (ajax) function to load the html of another page in given div, you can also call this on page onload or any event.

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

It seems that you are using AngularJS in your code, you can also use the ng-include to load html page content as following way,

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

Answer 2

What are you looking for is AJAX. Use ajax() method preferably because load() is actually deprecated, and get()/post() methods mentionated by the other users can be specified in ajax()(by default is GET).
You will also need html() to set the content of the div and preventDefault() method to stops the default action of the anchor from happening:

$(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

You could use $.get() to get the data and html() to add it to your div.

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

To make your menu dynamic, I suggest to bind a function to all the anchors inside .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 );
    });
  });
});