Primero crearemos una función para ir ocultando los elementos que necesitemos, de acuerdo al id que le indiquemos:
function ocultar(id){
document.getElementById(id).style.display="none";
}
</script>
Ahora crearemos otra función para ir mostrando los elementos que necesitemos, siempre de acuerdo al id que vayamos pasándole. Si nos fijamos bien, en ambas funciones estamos usando el método CSS display para mantener visibles o no los elementos de la página:
function mostrar(id){
ocultar("uno");
ocultar("dos");
ocultar("tres");
document.getElementById(id).style.display="block";
}
</script>
A continuación les muestro un archivo completo en el cual implemento este código para que se entienda mejor. En él, creo 3 capas y las voy mostrando y ocultando de acuerdo a la selección del usuario.
Nota: Este código lo aprendí de mi gran amigo José Miguel Aragonese :
<html>
<head>
<title>.:: ::..</title>
<script language="javascript" type="text/javascript">
function ocultar(id){
document.getElementById(id).style.display="none";
}
function mostrar(id){
ocultar("uno");
ocultar("dos");
ocultar("tres");
document.getElementById(id).style.display="block";
}
</script>
</head>
<body>
<a href="javascript:mostrar('uno')">Uno</a>
<br>
<a href="javascript:mostrar('dos')">Dos</a>
<br>
<a href="javascript:mostrar('tres')">Tres</a>
<div id="uno" style="display:none">Primer contenido</div>
<div id="dos" style="display:none">Ahora vemos el segundo contenido</div>
<div id="tres" style="display:none">y finalmente vemos el tercer contenido</div>
</body>
</html>
DEMO
Gracias Cesar buen contenido tal como lo explicas en el videotutorial php.