jQuery Load URL in DIV

jQuery Loading External URL's is very easy using .load() method, we can load the url's or images without refreshing the page and we can make simple website to large applications. the .load() method is a ajax function it helps you to load the data from server and returned the static or dynamic data into the selected element.

HTML

take list of buttons, and put it into div, and take one more div and give it name page to loading the external files.

<div id="navigation">
<ul>
<li><a id="btn">Page</a></li>
<li><a id="btn1">Page 1</a></li>
<li><a id="btn2">Page 2</a></li>
</ul>
</div>

<div class="page"></div>

CSS

write the css to navigation links and loading page div to better look.

<style>

.page{ width:500px; height:300px; padding:10px; border:solid #CCC 1px; margin:0 auto; margin-top:40px;}

ul{ margin:0; padding:0; list-style:none;}

li{ float:left; margin-right:1px;}

li a{ background-color:#F60; text-decoration:none;padding:10px; color:#FFF; cursor:pointer;}

#navigation{width:180px;margin:0 auto; margin-top:15px;}

</style>

jQuery

write the click function to each button and load the external files in page div using .load() method before loading the file display the loader.gif image using .html() method

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 

 $('#btn').click(function(){
  
  $('.page').html('<img src="loader.gif" >&nbsp;<span>Loading Page...</span>').load('one.html');
  
 });
 
 
 $('#btn1').click(function(){

  $('.page').html('<img src="loader.gif" >&nbsp;<span>Loading Page...</span>').load('two.html');
  
 });
 
 
 $('#btn2').click(function(){

  $('.page').html('<img src="loader.gif" >&nbsp;<span>Loading Page...</span>').load('three.html');
  
 });
 
});

</script>

Live Demo   Download Script