Problema al mostrar/ocultar capas

hgp147 · #1 (**permalink**) 11/12/2007, 20:45

Hola, tengo un problema para mostrar y ocultar las capas. Tengo 4 capas, al hacer clic en alguna quiero que la que se estaba mostrando se oculte, y así sucesivamente.

Dejo el código:

Código HTML:

<html>
<head>
<style>

#bloque1, #bloque2, #bloque3, #bloque4 {position: absolute; top: 20px; left: 0px;}

</style>

<script type="text/javascript">

OCULTO="none";
VISIBLE="block";
	
function mostrar(blo) {
  document.getElementById(blo).style.display=VISIBLE;
}
 
function ocultar(blo) {
  document.getElementById(blo).style.display=OCULTO;
}

</script>
</head>
<body>

<a href="#" onclic="ocultar('bloque2', 'bloque3', 'bloque4');mostrar('bloque1'); return false">Menu 1</a> | 

<a href="#" onclic="ocultar('bloque1', 'bloque3', 'bloque4');mostrar('bloque2'); return false">Menu 2</a> | 

<a href="#" onclic="ocultar('bloque1', 'bloque2', 'bloque4');mostrar('bloque3'); return false">Menu 3</a> | 

<a href="#" onclic="ocultar('bloque1', 'bloque2', 'bloque3');mostrar('bloque4'); return false">Menu 4</a> | 



<div id="bloque1" style="display: none;">
<a href="">Submenu 1.1</a> | <a href="">Submenu 1.2</a>
</div>

<div id="bloque2" style="display: none;">
<a href="">Submenu 2.1</a> | <a href="">Submenu 2.2</a>

</div>

<div id="bloque3" style="display: none;">
<a href="">Submenu 3.1</a> | <a href="">Submenu 3.2</a>
</div>

<div id="bloque4" style="display: none;">
<a href="">Submenu 4.1</a> | <a href="">Submenu 4.2</a>
</div>

</body>
</html>

Y un link dpnde pueden ver el resultado de ese código: http://hgp147.110mb.com/147.php

Muchas gracias!

caricatos · #2 (**permalink**) 11/12/2007, 21:30

Hola:

Podrías preocuparte solo de la que se debe mostrar:

function mostrar(blo) {
for (i in ["bloque1", "bloque2", "bloque3", "bloque4"])
document.getElementById(i).style.display = (i == blo) ? VISIBLE: OCULTO;
}

Saludos

caricatos · #3 (**permalink**) 12/12/2007, 00:47

Hola:

Unos retoques...

Código:

function mostrar(blo) {
var bloques = ["bloque1", "bloque2", "bloque3", "bloque4"];
for (i in bloques)
  document.getElementById(bloques[i]).style.display = (bloques[i] == blo) ? VISIBLE: OCULTO;
}

Saludos

hgp147 · #4 (**permalink**) 12/12/2007, 08:36

Excelente el código caricatos, funciona perfecto. Muchas gracias!

JuliusRomo · #5 (**permalink**) 04/01/2008, 18:25

Saludos...

Mi problema varía un poco al anterior, ya que lo que pretendo es x capas (dependiendo de la página, entre 3 y 8) esten visibles u ocultas, a gusto del "consumidor"

Esto implica que si hago visible la capa 1, y luego la 2, la 1 permanezca visible hasta que vuelva a clicar en un enlace o similar.

He usado un script de la web (creo que de caricatos):

Código HTML:

<script type="text/javascript">
var visto = null;
function ver(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
}
</script>


// Y despues.....

?>
			<br><div align="center" onClick="ver('dos')"><b>RIQUEZAS DEL REINO</B></div>
			<?php
			echo "<br><div align='center' class='oculto' id='dos'>

.......

</div>

Gracias de antemano

caricatos · #6 (**permalink**) 05/01/2008, 02:29

Hola:

La verdad es que el código es bueno, pero no es mío... por el estilo diría que es de JavierB, pero si lo que quieres es alternar entre visible y oculto, podrías directamente consultar ese estilo:

function alternar(objeto) {
with (document.getElementById(objeto).style)
display = (display == "block") ? "none" : "block";
}

Y para asegurarte que funcione bien, poner en los propios tags ese estilo:

<br><div align="center" onclick="alternar('dos')"><b>RIQUEZAS DEL REINO</B></div>
<br><div style='display: none' id='dos'>

Saludos

JuliusRomo · #7 (**permalink**) 05/01/2008, 06:13

Muchisimas gracias, ha funcionado correctamente....