Problema con Mostrar/Ocultar capas con 3 capas

aortiz_endirecto · #1 (**permalink**) 27/09/2007, 10:05

Hola a todos, me estoy rompiendo la capeza para conseguir ocultar y mostrar capas con 3 capas. He cogido un código que es para 2 capas pero para hacerlo funcionar con 3 me resulta imposible.

Este es el código q tengo:

<script type="text/javascript">
function muestralo(capa){
var x = document.getElementById(capa);
var origen = (capa == 'paso01')? document.getElementById('paso02') : document.getElementById('paso01');
x.style.display = (x.style.display == 'none')? 'block' : 'none';
origen.style.display = (origen.style.display == 'none')? 'block' : 'none';
}
</script>
<div id="lienzo">
<div id="marco">
<div id="contenido">
<div id="paso01" style="display: block;">
<div class="caja_flecha">
<h1>No me dao<br><br>ni cuenta</h1>
</div>
<a href="#" onclick="muestralo('paso02');return false" class="boton">O</a></div>
<div id="paso02" style="display: none;">
<div class="caja_flecha caso2" style="padding-left:30px;">
<h3>Hola Caracola</h3>
<p>asdfasdfasdfasdf</p>
<p><a href="#" target="_blank"></a></p>

</div>
<a href="#" onclick="muestralo('paso03');return false" class="botonkro">asdasd</a>
</div>
<div id="paso03" style="display: none;">
<div class="caja_flecha">
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. </p>
</div>
<a href="#" class="boton">asd</a>
</div>
</div>
</div>
</div>

</body>
</html>

No se, pero he intentado varias cosas pero nada.

Muchisimas gracias quien me pueda echar una manita.

caricatos · #2 (**permalink**) 27/09/2007, 10:41

Hola:

Suponiendo que tus capas son paso01..paso03...

function tag(id) {return document.getElementById(id);}
var pasos = ["paso01", "paso02", "paso03"];
function muesrtalo(capa) {
for (i = 0, total = pasos.length; i < total; i ++)
tag(pasos[i]).style.display = (pasos[i] == capa) "block" : "none";
)

Saludos

aortiz_endirecto · #3 (**permalink**) 28/09/2007, 03:57

Gracias, pero no me funcionó, me da un error a la hora de clicar en el botón,
el código del botón es éste.

<a href="#" onclick="muestralo('paso02');return false" class="botonkro">MUCHO MÁS QUE ESTO</a></div>

caricatos · #4 (**permalink**) 28/09/2007, 04:18

Cita:

Iniciado por aortiz_endirecto

Gracias, pero no me funcionó, me da un error a la hora de clicar en el botón,
el código del botón es éste.

<a href="#" onclick="muestralo('paso02');return false" class="botonkro">MUCHO MÁS QUE ESTO</a></div>

Verás, al escribirlo "a pelo", en ocasiones se teclean cosas indebidas, pero siempre supongo que se controlan esos errorcillos

He visto que el nombre que puse mal, tu lo has corregido, pero había otro error, ya que en vez de cerrar la función con una llave lo hice con un paréntesis, y faltaba el carácter "?" en la condición... la implementación (aparte de esas cosillas) está bien.

Ejemplo funcionando:

Código:

<html>
<head>
<script>
function tag(id) {return document.getElementById(id);}
var pasos = ["paso01", "paso02", "paso03"];
function muestralo(capa) {
for (i = 0, total = pasos.length; i < total; i ++)
tag(pasos[i]).style.display = (pasos[i] == capa) ? "block" : "none";
}

</script>
</head>
<body>
<span id="paso01" > paso 1 </span>
<span id="paso02" > paso 2 </span>
<span id="paso03" > paso 3 </span>

<button type="button" onclick="muestralo('paso01')"> muestra 1 </button>
<button type="button" onclick="muestralo('paso02')"> muestra 2 </button>
<button type="button" onclick="muestralo('paso03')"> muestra 3 </button>

</body>
</html>

Saludos

aortiz_endirecto · #5 (**permalink**) 28/09/2007, 04:43

Es PERFECTO.

Funcionó de p... m...

¡¡¡Muchísimas gracias Caricatos!!!

Saludos ;)