Aporte- Cargar diferente contenido en in div

[gVenom]

Lo siguiente es una idea(original de Chris Coyier) un poco arreglada de cómo cargar diferente contenido en una misma página usando css.
En algunos casos puede resultar práctico, como lo fue para mi, poder cargar un contenido diferente sin tener que releer toda la página que sigue, como cunado tenemos una cabecera flash que tarda un poco en cargarse, y eso lo logramos mediante CSS y un pequeño Script.
Es simple, y solo es un pequeño “engaño” o “cambio visual” lo que sucede. Para ello, vamos a crear varios div con las mismas características pero con diferente ID, asi por ejm:

Código CSS:

#centro_index{
    position:relative;
    left:0px;
    top:0px;
    width:780px;
    z-index: 99;
    display:none;
}
#centro_galeria{
    position:relative;
    left:0px;
    top:0px;
    width:780px;
    z-index: 99;
    display:none;
}
#centro_contacto{
    position:relative;
    left:0px;
    top:0px;
    width:780px;
    z-index: 99;
    display:none;
}
 

Todos ellos van a contener diferente contenido, pero solo uno a la vez será visto, gracias a la propiedad de Display. La posición relativa nos ayuda a colocar el div justo donde estaba el anterior, ayudado por el z-index. Ahora bien, con un script aplicado al botón que carga el contenido vamos a cambiar el estado de el div en su propiedad de Display, de esta forma:

Código HTML:

<a href="#" onclick="javascript:document.getElementById('centro-home').style.display='block' 
; document.getElementById('centro_galeria').style.display='none'
; document.getElementById('contacto_galeria').style.display='none';">Home</a> 

En la anterior instrucción le estamos cambiando el estado del display de none a block, block nos mostrará el contenido del div oculto, y el none se encarga de ocultar los demás div mientras este este presente.
Como nosotros necesitamos que al inicio de la página se muestre el contenido del index page, entonces en nuestro css el index debe estar en display:block, :

Código CSS:

#centro_index{
    position:relative;
    left:0px;
    top:0px;
    width:780px;
    z-index: 99;
    display:block;
}
 

O bien, si lo deseamos podemos mostrar un contenido distinto de forma temporal, hasta un gif animado de "loading" segun nuestro gusto y forma de pensar.

Aqui esta un ejemplo. Si se fijan, al darle click, la página se mantiene siempre.

Espero que le sirva a algunos y a los que saben mucho, quizá hasta puedan optimizar este método.