Mostrar y ocultar capas

pablomola · #1 (**permalink**) 10/03/2005, 02:42

Estimados amigos.
Mi pregunta es la siguiente
Tengo varios divs en una página ocupando el mismo sitio físico.
Lo que deseo es que al hacer clic sobre el enlace, se muestre la capa correspondiente a ese enlace y al hacer clic sobre el siguiente enlace se oculte la primera capa y aparezca la segunda que corresponde al segundo enlace.

JavierB · #2 (**permalink**) 10/03/2005, 12:22

Hola pablomola

Te pongo un ejemplo:

Código PHP:

  <html> 
<head> 
<style type="text/css"> 
.micapa {visibility:hidden} 
</style> 
<script type="text/javascript"> 
var capa=null; 
function mostrar(c) { 
  obj=document.getElementById(c); 
  if(capa!=null) 
    capa.style.visibility='hidden'; 
  obj.style.visibility='visible'; 
  capa=obj; 
} 
</script> 
</head> 
<body> 
<a href="#" onclick="mostrar('capa1');return false">Capa 1</a> 
<a href="#" onclick="mostrar('capa2');return false">Capa 2</a> 
<div id="capa1" class="micapa">C1</div> 
<div id="capa2" class="micapa">C2</div> 
</body> 
</html>

Saludos,

NeoZ · #3 (**permalink**) 17/10/2005, 07:39

Holas. He probado el anterior ejemplo y funciona de maravillas.
Solo tengo una duda y no se si se realiza con javascript o css. Como se puede hacer para que al ocultar una capa y al mostrar otra, siempre se situen en el mismo lugar?

Es decir, en el ejemplo anterior, muestra C1 al clicar en "capa1", pero al clicar en capa2, lo muestra correctamente pero más abajo de la posición de C1, dejando un espacio en blanco.

Saludos!!!

P.D. Edito, porque ya me respondo yo mismo:

Con CSS. Solamente hay que añadir en el estilo:

Código:

.micapa {visibility:hidden; position:absolute;}

Saludos!!!

JavierB · #4 (**permalink**) 17/10/2005, 08:27

Hola NeoZ

Otra opción es usar display en lugar de visibility

Código PHP:

  <style type="text/css">
.micapa {display:none}
</style>
<script type="text/javascript">
var capa=null;
function mostrar(c) {
  obj=document.getElementById(c);
  if(capa!=null)
    capa.style.display='none';
  obj.style.visibility='block';

Saludos,

NeoZ · #5 (**permalink**) 17/10/2005, 09:52

Perfecto!

Muchas gracias JavierB

Saludos!

JavierB · #6 (**permalink**) 17/10/2005, 10:18

Muchas de nada. Hasta pronto

thymon · #7 (**permalink**) 09/02/2012, 10:54

------------------------------------------------------

De nuevo, pido perdón por reflotar un post tan antiguo.

Un saludo y mil gracias.