The following technique is not real ajax because there is now xml-http-request-object in use and no data is loaded from the server after the page is displayed. But it’s possible to open different menu entries without sending requests to the web server. How is it done?
Assumption: We have a home page with a menu containing: “Home”, “Information”, “About me”.
First using this technique the whole page is loaded on page load which means each content like “Home”, “About”, … has its own <div> element.
<div id="cHome" style="display: none ">
welcome to home
</div>
It is important that each <div> has a css-style element that sets display to “none” this causes the browser to hide all the unwanted content.
How to display the content of “cHome” after clicking on menu button?
First we need to implement the java-script function, which hides all unwanted and shows all wanted content:
function display_content(id)
{
document.getElementById('cHome').style.display='none'; //hides
document.getElementById('cAbout').style.display='none'; //hides
document.getElementById(id).style.display=''; //displays
}
The java-script function is called using “onclick” on a
menu button or link:
<a href="#" onclick="display_content('cHome')">Home</a>
After clicking on Home, all other <div> are set invisible and the cHome
<div> is displayed. This is all done using CSS and Java-Script
without using requests to the server.