como podria hacer con jquery ocultar un div

azaz · #1 (**permalink**) 09/05/2012, 01:22

Alguien me puede decir si es posible con jquery crear una funcion para mostrar un div y ocultar otro, suponiendo que tengo tres div.

<div id='uno'>contenido uno</div>
<p onclick='contenidoUno();'>ver contenido uno</p>

<div id='dos'>contenido dos</div>
<p onclick='contenidoDos();'>ver contenido dos</p>

<div id='tres'>contenido tres</div>
<p onclick='contenido tres();'>ver contenido tres</p>

la estructura del codigo seria algo asin, pero no se como podria hacer la funcion contenido para ocultar los dos div que no quiero ver y mostrar el que si quiero ver, esto es posible con jquery.

caricatos · #2 (**permalink**) 09/05/2012, 02:22

Hola:

¿Por qué jquery y no javascript...?

Con javascript sería simplemente cambiar estilos y no necesitas cargar una librería innecesariamente.

Saludos

azaz · #3 (**permalink**) 09/05/2012, 02:46

Hola caricatos, decía Lo de jquery porque la librería ya la tengo cargada, y el código sería más limpio,pero cómo se hace?

caricatos · #4 (**permalink**) 09/05/2012, 03:16

Hola:

Sobre esta afirmación:

Cita:

Iniciado por azaz

...y el código sería más limpio,...

... no estoy nada de acuerdo...

Con una sola función:

<p onclick="contenido('Uno')" >...

Siendo las capas "Uno", "Dos" y "Tres": con la funcion contenido...

function contenido(cual) {
for (i in ["Uno", "Dos", "Tres"]
document.getElementById(i).style.display = (i == cual) ? "block":"none";
}

Saludos

azaz · #5 (**permalink**) 09/05/2012, 04:02

caricatos, tienes razon no es tanto codigo como para usar jquery, pero tengo alguna duda, por ejemplo la funcion que me dijistes lo que entiendo que hace es que pasandole el parametro del div que quiera lo muestra, por defecto quiero mostrar el div uno, pero si llamo a la funcion que muestra el div dos algo asin contenido(dos), lo que me hace es mostrarme el contenido del div dos pero antes me tendria que ocultar el div 1 o el div que se este viendo en ese momento, pero no se como tendria que hacerlo, alguna ayuda.

Saludos

emprear · #6 (**permalink**) 09/05/2012, 05:38

Cita:

Iniciado por caricatos

Hola:

Sobre esta afirmación:

... no estoy nada de acuerdo...

Con una sola función:

<p onclick="contenido('Uno')" >...

Siendo las capas "Uno", "Dos" y "Tres": con la funcion contenido...

function contenido(cual) {
for (i in ["Uno", "Dos", "Tres"]
document.getElementById(i).style.display = (i == cual) ? "block":"none";
}

Saludos

@Caricatos, me quedé analizando tu código (buen detalle el del uso de in), y vi que no funciona, entre otras cosas porque le pasas el indice (i) y no el valor(id) del elemento.
Como sigue funciona correctamente

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mostrar oculta capas</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* estilos */ 
p{
font-weight: bold;
cursor: pointer;
}
#Uno,#Dos,#Tres{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function contenido(cual){
var capas = new Array("Uno", "Dos", "Tres");
var i;
for (i in capas){
if(capas[i] != cual){
document.getElementById(capas[i]).style.display = 'none';
}else{
document.getElementById(cual).style.display = 'block';
}
}
}
//]]>
</script>
</head>
<body>
<p onclick="contenido('Uno')" >uno</p>
<div id="Uno">Texto uno</div>
<p onclick="contenido('Dos')" >dos</p>
<div id="Dos">Texto dos</div>
<p onclick="contenido('Tres')" >tres</p>
<div id="Tres">Texto tres</div>
</body>
</html>

Saludos