mostrar/ocultar

manisero_15 · #1 (**permalink**) 29/10/2012, 18:32

Buenas

Necesito ayuda!!
El problema es el siguiente .
Tengo un menu con
Opcion 1
Opcion 2
Opcion 3

Y quiero al clicar sobre cada enlace se muestre un div con informacion y si por ejemplo clicas opcion 3 que oculte la 2.

He leido varios tema acerca de esto pero no me aclaro mucho.

Encontre este codigo y lo adapte

function cambiar(idCapa){
if (document.all) capa = eval(idCapa + ".style");
if (document.getElementById) capa = eval('document.getElementById("' + idCapa + '").style');
if ((capa.visibility == "hidden") || (capa.visibility == "hide"))
{capa.visibility="visible" ;
capa.display="";
}
else
{capa.visibility="hidden";
capa.display="none";}
if (antes==null)
{antes=capa;}
else
{antes.visibility="hidden" ; antes.display="none"; antes=capa;
}
}

El codigo me funciona el problema es que para que funciones tengo que pinxar opcion 1 opcion 2 y opcion 1 y a partir de ahi el codigo funciona sin problemas.

¿Alguna idea de lo que ocurre? Gracias.

emprear · #2 (**permalink**) 29/10/2012, 19:45

Tienes razón hay nuchos temas acerca de este tema, nuestro colega @furoya se tomó el trabajo de hacer una reseña, y tan solo con los ejempos que están en el foro.
La podés ver aqui
http://www.forosdelweb.com/f13/apare...8/#post4300505

A las mencionadas (de las cuales no hago juicio alguno) sumo otra variante, que creo no está contemplada, el css, salvo esto

#Uno,#Dos,#Tres{
display: none;
}

que oculta las capas por defecto, es completamente opcional

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[*/
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
background-color:white;
}
#Uno,#Dos,#Tres{
display: none;
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function contenido(cual){
var capas = new Array("Uno", "Dos", "Tres");
for(var i in capas){
var e = document.getElementById(capas[i]);
capas[i] == cual?e.style.display='block':e.style.display='none';        
}
}
//]]>
</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

dagj · #3 (**permalink**) 30/10/2012, 09:21

Amigo justo yo tenia ese problema y lo resolvi con una funcion y pase de parametros, en el cual los primeros parametros son para ocultar y el ultimo para mostrar, fijate aca:

Código HTML:

<script>
function MuOc(id, id2, id3, id4){
var oculta = document.getElementById(id); //se define la variable "oculta" igual a nuestro div
var oculta2 = document.getElementById(id2);
var oculta3 = document.getElementById(id3);
var muestra = document.getElementById(id4);
oculta.style.display='none';//damos un atributo display:block que el div
oculta2.style.display='none';	
oculta3.style.display='none';
muestra.style.display='block';
}
</script>

en el boton, la funcion onclick="MuOc('nombreAOcultar,''nombreAOcultar2,'' nombreAOcultar3,''nombreAMostrar,)'"

Espero te sirva