php - 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

<div id="nav">
<a href="infoto (div id="content")">a link </a></div>
<div id="content>show the stuff</div> 

From the comments below - the OP stated the following :

I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html

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:

<div id="nav">
    <a href="#content1">Show content 1</a>
    <a href="#content2">Show content 2</a>
    <a href="#content3">Show content 3</a>
</div>

<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>

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

<a href="http:www.test.com/test1.html">Show content 1</a>
<a href="http:www.test.com/test2.html">Show content 2</a>

jQuery

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