Creo que esto te va a ayudar mucho.
contenido1.html, contenido2.html, contenido3.html y contenido4.html
esos documentos deben de existir xD junto con index.html
index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de AJAX</title>
</head>
<script type="text/javascript">
<!--
//crear una variable de Bool para comprobar si el navegador es IE
var xmlhttp = false;
//Comprobar si estamos utilizando IE
try{
//si la versón de javascript es superior a 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
//Si no, utiliza el tradicional objeto ActiveX
try{
//Si estamos utilizando IE
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (E){
//En caso contrario debe tratarse de un navegador que no es IE
xmlhttp = false;
}}
//Si no estamos usando IE, creamos una instancia javascript del objeto.
if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
}
function makerequest(serverPage,objID){
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send (null);
}
// -->
</script>
<body onload="makerequest('contenido1.html','mostrador'); return false;">
<div align="center">
<h1>Owner ActiveSheet</h1>
<a href="" onclick="makerequest('contenido1.html','mostrador'); return false;">Pagina 1</a> |
<a href="" onclick="makerequest('contenido2.html','mostrador'); return false;">Pagina 2</a> |
<a href="" onclick="makerequest('contenido3.html','mostrador'); return false;">Pagina 3</a> |
<a href="" onclick="makerequest('contenido4.html','mostrador'); return false;">Pagina 4</a>
<div id="mostrador"></div>
</div>
</body>
</html>
Mostrar Mensajes
