通过将其他内容保持为静态来动态加载页面/内容

Question

i want to load html page dynamically in my div element by keeping home.html page as default and on loading another html page the content other than div element should be static. How can i achieve it? please help. I am using following codes...

html code

<nav class="main">
    <a href="home.html">Page 1</a>
    <a href="contact.html">Page 2</a>
    <a href="about.html">Page 3</a>
    <a href="product.html">Page 4</a>
    <a href="page5.html">Page 5</a>
</nav>

<div id="dynamic">
</div>

and my jquery code is

$(document).ready(function(){
    $('a').click(function(){
        $('#dynamic').load('home.html');
        return false;
    });
})

Answer 1

To load the page specified in the href of the anchor:

$('a').click(function(){
    $('#dynamic').load(this.getAttribute('href'));
    return false;
}

Answer 2

Try this approach. The loading target url should be based on the link that has been clicked.

$(document).ready(function(){
    $('nav a').click(function(event){
        event.preventDefault();

        $('#dynamic').load($(this).attr('href'));

        return false;
    });
})

Please see sample jsfiddle .