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

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

• php
• javascript
• css

• your question is a bit confusing, did you want the link to show a hidden div? or have the link append something to the div? or something else? – Gordnfreeman Commented Nov 16, 2011 at 14:12
• I think, you need to work with AJAX. – Riz Commented Nov 16, 2011 at 14:13
• Sounds like you're ready to jump into the wonderful world of javascript. Try reading up on it a bit, and post some of the things you've tried. This page is probably a good start and gets you half-way to your answer: http://www.webdesignfromscratch./javascript/js101/ – Dave Commented Nov 16, 2011 at 14:14
• 1 @dev - no, he doesn't need ajax. – Dave Commented Nov 16, 2011 at 14:16
• What do you want to achieve? something like this: jsfiddle/5NEu3/2 – user920041 Commented Nov 16, 2011 at 14:20

4 Answers 4

Alt 1: Use jquery tabs: See demo and code here: http://jqueryui./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/5NEu3/3/

Alt 3: Load from server ondemand:

To load html into your main div you should use: http://api.jquery./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./test1.html">Show content 1</a>
<a href="http:www.test./test2.html">Show content 2</a>

jQuery

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

Using jQuery, you could do something like this.

This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.

<script src="//ajax.googleapis./ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function() {
  $('#nav a').click(function(e) {
   e.preventDefault();
   $('#content').load($(this).attr('href'));
  });
 });
</script>

<div id="nav">
   <a href="somepage.html">Some page</a>
   <a href="someotherpage.html">Some other page</a>
   <a href="smypage.html">My page</a>
</div>
<div id="content">
 show the stuff
</div>  

Something like this:

function setContent(div, content)
{
    getElementById(div).innerHtml = content;
    return false; // return false to ignore the click
}

<a href="path-to-non-js-browsers-and-search-engines.html" onClick="setContent('content','foo');">a link </a>

to show a hidden div (i think this is what you wanted)

the javascript (using jQuery)

<script src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#showdiv").click(function () {
       $("#hiddendiv").show();             
    });
  });
 <script>

the html

<a href="javascript: void(0)" id="showdiv">Show the Div</a>
<div id="hiddendiv" style="display:none;">Content here</div>

you can see it in action here