Question

I have top nav,left nav whose links are driven by top nav link being clicked and the page itself is two columns layout with left nav and content container with a top nav

 <div id="topnav">Topic1 | Topic 2 | Topic 3</div>

    <div id="navigation">
      <!--all links from topic1 by default, or topic 2 links if topic 2 clicked-->
        <a href="home.html">Home</a>
        <a href="pictures.html">Picture</a>
    </div>
    <div id="content">
         <!-- content will load here -->
    </div>

when I click on topic 1, all the links belonging to topic 1 should load in left nav and
When I click pictures, the my pictures should load in #content.
How do I do this in jquery or javascript?
please help..jquery newbie here..

Answer 1

HTML

<a class="loader" href="home.html">Link 1</a>
<div id="content"></div>

JavaScript (using jQuery)

$('a.loader').on('click', function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href'));
});

Like @Musa said, the URLs you’re loading should be in your own domain.