<html>
<head>
<title>
Pestañas
</title>
<script language="javascript">
function ocultarTodo() {
indicadores = document.getElementById("cabecera").getElementsByTagName("div");
for (var i = 0; i < indicadores.length; i ++)
indicadores[i].style.display = "none";
}
</script> </head>
<body>
<div align=center>
<div id="cabecera" >
<span onclick="ocultarTodo(); document.getElementById('cuerpo1').style.display = 'block'"
style="background-color: #eeeeee; border-width: 2px; border-style: ridge ridge none ridge; border-color: red;">
Mostrar capa 1
</span>
<span onclick="ocultarTodo(); document.getElementById('cuerpo2').style.display = 'block'"
style="background-color: #dddddd; border-width: 2px; border-style: ridge ridge none ridge; border-color: blue;">
Mostrar capa 2
</span>
<div id="cuerpo1" style="width: 80%; border: 1px none red; background-color: #eeeeee; display: block;">
Este es el contenido de la capa 1
<br />
<br />
<br />
</div>
<div id="cuerpo2" style="width: 80%; border: 1px none blue; background-color: #dddddd; display: none;">
Este es el contenido de la capa 2
<br />
<br />
<br />
</div>
</div>
</div>
</body
</html>
No hay comentarios:
Publicar un comentario