Change Div Content With Link In Another Div

i have a menu bar with links which are in the header. when you click the link, i want to just change the content in the main div. i'm thinking of doing it in php, but you will have

Solution 1:

If you think about using PHP, I guess that you have to load dynamic content. For this, I advice you to use AJAX

The easiest is to use a framework, like the famous Jquery. Example here

Solution 2:

here i am assuming that you get your content with a function call as content()

var list=document.getElementById('nav');
var links=list.getElementsByTagName('a');
var header=document.getElementById('header');
for (var i=0;i<links.length;i++)
{
links[i].onclick=function() {
header.innerHTML=content();       //here you can use something else to generate the content
}
}

Solution 3:

In order to dynamicly load content (e.g. from a server using php/sql) without having to reload the website Ajax is exactly what you need.

Inlineframes (mentioned before), however, should not be used for they are deprecated.

W3schools provides a very basic but straightforward tutorial on Ajax.

Solution 4:

You want to use jquery to build something like this. If you are serious about building web apps you need to learn how to use it (or a similiar framework like MooTools)

For this particular problem I would use an existing menuing system, here's the first list of jquery based menus that I found, but there are many more.

Solution 5:

You don't need any anchor elements. W3 example

<script>
$(document).ready(function() {
    $('.menu').click(function() {
            $("div").load('somecontent.txt');       
    });
});
</script><ul><liclass="menu">Enter Information</li><liclass="menu">View Records</li><liclass="menu">View Upcoming</li></ul>