Hola otra vez:
Como he dicho antes, lo uso en mi galería de caricaturas:
http://www.sucaricatura.com/2004/ no son pestañas pero cada página esn una capa con los estilos que te mencioné...
Ahora que lo pienso, tengo otra página en donde puse un sistema con pestañas y además es un Inspector de código:
http://www.pepemolina.com/DOM/index.html
Tienes que desplegar las notas finales y enlazar con "ejemplo frames" y en el frame inferior está el ejemplo.
Por si tienes pereza de dar esos pasos, te pongo el código:
Código:
<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>
Saludos
