Mostrar y ocultar contenidos

abigor66 · #1 (**permalink**) 15/07/2008, 16:35

Que más Foreros,
estoy enredado con algo y espero me puedan ayudar.
aunque en la red hay bastantes lineas de como mostrar y ocultar contenidos, no he podido hacer algo especifico que necesito; la mayoria de los ejemplos que hay muestran el contenido al dar un click y lo ocultan cuando se da un click más en el mismo enlace. la idea es la siguiente:
hay varios enlaces, cada uno con un contenido ocuto. como se haría para que al dar un click sobres un enlace, se oculte el contenido que se pidio anteriormente y se muestre el nuevo?

acá un ejemplo con radioButtons

Código HTML:

<html>
<head>
<title>Muestra oculta</title>
<script>
var capas = ["capa1", "capa2"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>
</head>

<body>
<input type="radio" name="r" value="capa1" onclick="mostrar(this.value)" />item1
<input type="radio" name="r" value="capa2" onclick="mostrar(this.value)" />item2
<div  id="capa1" style="display:none;">Contenido1</div>
<div  id="capa2" style="display:none;">Contenido2</div>
</body>
</html>

pero la idea es que sean enlaces no radio.

gracias de antemano.

abigor66 · #2 (**permalink**) 15/07/2008, 16:48

Solucionado:
Como no puedo eliminar el post, pongo la solución.

Código HTML:

<html>
<head>
<script>
var capas = ["capa1", "capa2", "capa3", "capa4"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>

<style type="text/css">
<!--
#capa1, #capa2, #capa3, #capa4  {
display: none;
}
-->
</style>
</head>
<body>
<a href="#" onclick="mostrar('capa1')"> mostrar capa 1 </a>
<a href="#" onclick="mostrar('capa2')"> mostrar capa 2 </a>
<a href="#" onclick="mostrar('capa3')"> mostrar capa 3 </a>
<a href="#" onclick="mostrar('capa4')"> mostrar capa 4 </a>
<div id="capa1" >
contenido de capa1
</div>
<div id="capa2" >
contenido de capa2
</div>
<div id="capa3" >
contenido de capa3
</div>
<div id="capa4" >
contenido de capa4
</div>
</body>

Gracias de todas maneras

buzu · #3 (**permalink**) 15/07/2008, 18:02

NO! Estas cometiendo una infracción y por tal motivo te suspenderemos la licencia para desarrollar jajaja.

Bueno ya pongamonos serios. La verdad es que estas usnado unas cuantas malas practicas.

1.- Enlaces que no llevan a nada. El "#" se debería evitar siempre que sea posible, y en este caso lo es.
2.- Javascript obtrusibo.Evita mesclar el javascript con el html. Puedes asignar la función al evento onclick de formas mas amigables.
3.- Estas escondiendo las capas desde un principio. Si el javascript está desactivado, no habrá manera de que el usuario vea el contenido de las capas.

Son solo algunos puntos que espero tomes en cuenta ya que si lo haces aumentaras la compatibilidad de tu sitio web.

abigor66 · #4 (**permalink**) 16/07/2008, 08:19

buzu, gracias por tus sugerencias

buzu · #5 (**permalink**) 16/07/2008, 22:54

Por nada, Solo tratando de hacer de la web un lugar mas amigable para el usuario final.