Ocultar/mostrar capas

Fociños · #1 (**permalink**) 18/06/2006, 04:44

Hola, he visto el siguiente código en los indices temáticos:

Código HTML:

<html>
<head>
<script LANGUAGE="javascript">
var capa
function cambio(idCapa){
 if (document.layers) capa = eval("document." + idCapa);
 if (document.all) capa = eval(idCapa + ".style");
 if (document.getElementById) capa = eval('document.getElementById("' + idCapa + '").style');

 if ((capa.visibility == "hidden") || (capa.visibility == "hide")){
  capa.visibility = (document.layers) ? "show" : "visible" ;
 }else{
  capa.visibility = (document.layers) ? "hide" : "hidden" ;
 }
}
//-->
</script>
</head>
<body>
<div id="capa1" style='position:relative;'>
Esta es la capa 1
</div>
<div id="capa2" style='position:relative;'>
Esta es la capa 2
</div>
<a href="#" onclick="cambio('capa1')">Muestra/oculta la capa 1</a>
<br>
<a href="#" onclick="cambio('capa2')">Muestra/oculta la capa 2</a>
</body>

Pero me gustaría que una capa estuviera por defecto mostrada y otra oculta. Cómo lo puedo hacer, gracias?

caricatos · #2 (**permalink**) 18/06/2006, 05:04

Hola:

El código se ve algo viejo... ya no se consideran los "layers" que solo funciona en netscape 4...

puedes usar identificadores y estilos:

css:
#capa1 {
display: block;
}

#capa2, #capa3, #capa4 {
display: none;
}

javascript:
var capas = ["capa1", "capa2", "capa3", "capa4"];
function mostrar(capa) {
// primero ocultamos todas...
for (var i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = "none";
// y ahora mostramos la actual...
document.getElementById(capa).style.display = "block";
}

html:
<div id="capa1" >
contenido de capa
</div>
<div id="capa2" >
contenido de capa
</div>
<div id="capa3" >
contenido de capa
</div>
<div id="capa4" >
contenido de capa
</div>

selectores:
<button onclick="mostrar('capa1')"> mostrar capa 1 </button>
<button onclick="mostrar('capa2')"> mostrar capa 2 </button>
<button onclick="mostrar('capa3')"> mostrar capa 3 </button>
<button onclick="mostrar('capa4')"> mostrar capa 4 </button>

Como verás el ejemplo vale para una serie de capas... y la teoría se asemeja a los sistemas de pestañas.

En vez de activarlo con enlaces lo hice con botones, ya que tal como está tu ejemplo la página se recargaría siempre que se pulsa el enlace (en mi opinión una mala práctica)

Saludos

Fociños · #3 (**permalink**) 18/06/2006, 13:26

El código está bien, pero quería que al pinchar en un enlace se mostrara y en el siguiente clic se ocultara, he probado con <a href="#" onclick="mostrar('capa2')">Mostrar / ocultar</a> pero no va

caricatos · #4 (**permalink**) 18/06/2006, 17:35

Cita:

Iniciado por Fociños

El código está bien, pero quería que al pinchar en un enlace se mostrara y en el siguiente clic se ocultara, he probado con <a href="#" onclick="mostrar('capa2')">Mostrar / ocultar</a> pero no va

Hola:

Ese tipo de enlaces debes tratar de evitarlos ya que refresca la página y por tanto se pierden los scripts...

Cuando no quieras enlazar con otra página, es desaconsejable usar tags a (el último párrafo de mi respuesta anterior)... si usas ese tag por la mano, puedes mostrarla usando estilos...

<span onclick="mostrar('capa1')" style="cursor: pointer"> mostrar capa 1 </span>... si pones href="#" refrescas la página por el uso de ese tag...

Saludos

Fociños · #5 (**permalink**) 19/06/2006, 06:00

Gracias Caricatos, pero sólo consigo mostrar una y ocultar el resto, yo lo que quiero es mostrar/ocultar cada una por separado.

caricatos · #6 (**permalink**) 19/06/2006, 08:57

Hola:

Bueno, entonces hay que hacer unas pequeñas modificaciones...

Los estilos deberían ponerse inline:

<div id="capa1" style="display: block">
contenido de capa
</div>

El nombre de la función estaría mejor cambiar (como la original)... y su contenido...

function cambiar(capa) {
soy = document.getElementById(capa);
soy.style.display = (soy.style.display == "block") ? "none" : "block";
}

Y la llamada igual (cambiando mostrar por cambiar)

Saludos

Fociños · #7 (**permalink**) 09/11/2006, 05:43

Me ha funcionado a la perfección, pero ahora necesito una pequeña modificación, necesito que en se muestre "mostrar capa 1" u "ocultar capa 1" en función de si la capa no se está mostrando o se está mostrando, respectivamente.

Código HTML:

<button onclick="mostrar('capa1')"> mostrar capa 1 </button>

yesik · #8 (**permalink**) 09/11/2006, 06:41

una pregunta al respecto, si tengo las capas que contienen elementos de tablas y estas capas estan a su vez dentro de una capa padre, como las pongo todas en la misma posicion?

<div><div id="capa1" >
<td><tr>......<tr/></td>
</div>
<div id="capa2" > //todas ocultas
contenido de capa
</div>
<div id="capa3" >
contenido de capa
</div>
<div id="capa4" >
contenido de capa
</div></div>

Fociños · #9 (**permalink**) 10/11/2006, 02:40

Cita:

Iniciado por yesik

una pregunta al respecto, si tengo las capas que contienen elementos de tablas y estas capas estan a su vez dentro de una capa padre, como las pongo todas en la misma posicion?

<div><div id="capa1" >
<td><tr>......<tr/></td>
</div>
<div id="capa2" > //todas ocultas
contenido de capa
</div>
<div id="capa3" >
contenido de capa
</div>
<div id="capa4" >
contenido de capa
</div></div>

Podrías explicarte un poco mejor