Ver ficha con pestañas

noelia
27 de Mayo del 2004
hola [email protected] necesito ayuda para hacer una cosita en java script.
Quiero mostrar una ficha en la que el numero de datos a mostrar es muy grande.
La idea es hacer una pagina con los datos separados en grupos y organizarlo en pantalla con pestañas, estilo windows en las propiedades de un fichero.

Tengo entendido que esto es javascript pero no estoy segura. Alguien me podria echar una mano?

Muchas gracias, un sludo a [email protected]

rsalvadores
27 de Mayo del 2004
Hay muchas formas de hacer lo de las pestañas, te envio una simple que te servirá para ver el funcionamineto, después puede complicarlo todo lo que tu quieras.

Una forma que queda muy bien, consiste en que las pestañas sean imagenes de todo el menu, con la opción elgida vista,separadas con barra inclinada... etc, y según cual este activa ocultas las demás para dejar esa visible. Si te lo curras un poco puede quedar muy bien.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function cambia(_num){
for (i=1;i<=4;i++) document.getElementById("Layer"+i+"").style.display="none"
for (i=1;i<=4;i++) document.getElementById("Layer5"+i+"").style.background="#CCCCCC"
document.getElementById("Layer"+_num+"").style.display="block"
document.getElementById("Layer5"+_num+"").style.background="#999999"
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="Layer1" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:1; ;background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:bloque">
<p align="center">&nbsp;</p>
<p align="center"><font size="7" color="#FF0000">1</font></p>
</div>
<div id="Layer2" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center">&nbsp;</p>
<p align="center"><font color="#FF0000" size="7">2</font></p>

</div>
<div id="Layer3" style="position:absolute; left:53px; top:92px; width:216px; height:183px;z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center">&nbsp;</p>
<p align="center"><font color="#FF0000" size="7">3</font></p>
</div>
<div id="Layer4" style="position:absolute; left:53px; top:92px; width:216px; height:183px; z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;display:none">
<p align="center">&nbsp;</p>
<p align="center"><font size="10" color="#FF0000">4</font></p>
</div>

<div id="Layer5" style="position:absolute; left:53px; top:73px; width:216px; height:20px; z-index:3">
<div id="Layer51" style="position:absolute; left:0px; top:0px; width:54px; height:20px; z-index:1; background-color: #999999; layer-background-color: #999999; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('1')">Uno</div>
</div>
<div id="Layer52" style="position:absolute; left:54px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('2')">Dos</div>
</div>
<div id="Layer53" style="position:absolute; left:108px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('3')">Tres</div>
</div>
<div id="Layer54" style="position:absolute; left:162px; top:0px; width:54px; height:20px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border-style:solid;border-width:1;border-color:999999">
<div align="center" onclick="javascript:cambia('4')">Cuatro</div>
</div>
</div>

</body>
</html>

Suerte

rsalvadores