Clicking a link display it in Different Div on Same Page

Question

I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had

Answer 1

Alt 1: Use jquery tabs: See demo and code here: http://jqueryui.com/demos/tabs/

Alt 2: Hide/show div in same html file:

HTML:

    Show content 1
    Show content 2
    Show content 3


show the stuff1
 
show the stuff2
show the stuff3

jQuery:

$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

Demo: http://jsfiddle.net/5NEu3/3/

Alt 3: Load from server ondemand:

To load html into your main div you should use: http://api.jquery.com/load/ Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.

Html

Show content 1
Show content 2

jQuery

$("#nav a").click(function(e){
        e.preventDefault();
        $('#maindiv').load($(this).attr("href"));
});