Load HTML content using jQuery

When playing your code with HTML language you sometime thought about loading content from different HTML file without reloading page. If not you thought about I thought about it several time at that time a way which I handle thing is using jQuery. It provide pre-build in function load to handle this. For an example if a page have different menu items like about us, services, contact us etc. then we can use this jQuery to load those HTML in body without refresh page.

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */

<div id="nav">
    <a href ="#" id="load_home"> HOME </a>
    <a href ="#" id="load_about"> About Us </a>
    <a href ="#" id="load_services"> Services </a>
    <a href ="#" id="load_contact"> Contact Us </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("home.html");
    });
    $("#load_about").on("click", function() {
        $("#content").load("about.html");
    });
    $("#load_services").on("click", function() {
        $("#content").load("services.html");
    });
    $("#load_contact").on("click", function() {
        $("#content").load("contact.html");
    });
});
</script>

In the above script when a particular link is clicked then it load respective content in content div.

Happy playing….

Leave a Reply