jQuery: Load and Replace DIV Content with clicking Links

In this tutorial, I would like to show you how to enhance some of your links on your website in a way that with clicking the link some content will be dynamically loaded into a DIV container. We are doing that with AJAX, jQuery and JavaScript and of course, without reloading the page are changing the other content of the page.

HTML

First, we want to have a look at the HTML. Here, we can see our links and the DIV container with the ID "c" in which we want to load the dynamic content later.

<ul>
  <li><a href="page1.html" class="cloader">Page 1</a></li>
  <li><a href="page2.html" class="cloader">Page 2</a></li>
  <li><a href="page3.html" class="cloader">Page 3</a></li>
</ul>

<div id="c"></div>

As you can see, we have assigned the class "cloader" to each link.

JavaScript / jQuery

Using JavaScript, we are assigning the desired function to each HTML elements with the class "cloader".

$(document).ready(function() {	
					
   $(".cloader").click(function() {

      var p = $(this).attr("href");

      $("#c").load(p);   

      return false;

   });

});

First, we are reaching out the attribute "href" from our links in order to store it in the variable "p". That is "page1.html", "page2.html" and "page3.html" for our links above.

After that, we are using $("#c").load(p) for loading the content from the page "p" into the container with the ID "c". That is all! Depending on which link we have clicked, the corresponding content will be displayed in our DIV.

Of course, you have to create the pages "page1.html", "page2.html" and "page3.html" before. Those pages have to contain the desired HTML source code which you want to load into the DIV box.

Alternative

If we only want to use single links or if we want to get rid of the thing with the variable, we can also use the following alternative.

<ul>
  <li><a href="page1.html" class="loadseite1">Page 1</a></li>
  <li><a href="page2.html" class="loadseite2">Page 2</a></li>
</ul>

<div id="c"></div>

Instead of our general "cloader"-class, we are now using different classes, a different class for each link.

$(document).ready(function() {	
					
   $(".loadseite1").click(function() {
      $("#c").load('page1.htm');   
      return false;
   });

   $(".loadseite2").click(function() {
      $("#c").load('page2.htm');   
      return false;
   });
});

Accordingly, we have written an individual function for each link in which we are directly loading the corresponding page.

By the way, of course, we can also assign the class to each other element on our webpage to make a link out of the element. For example, we can change a normal DIV box with writing <div class="loadseite1"><div> to such a link.