Problema al ocultar divs

[carlosgs91]

Hola, he hecho esto:

Código HTML:

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a:link {
	color: #0066CC;
}
a:visited {
	color: #0066CC;
}
a:hover {
	color: #0066CC;
}
a:active {
	color: #0066CC;
}
.barratopgeneral {

}
.barratopgeneral2 {
width:606px;
height:22px;
background-color:#CCCCCC;
padding:5px;
border:1px solid #666666;}
.barratopgeneral3 {
width:606px;
height:22px;
background-color:#DBDBDB;
padding:5px;
border:1px solid #666666;}
.barratopindividual {
width:195px;
float:left;
margin-right:2px;}
.barratopindividual2 {
background-color:#999999;
width:195px;
float:left;
margin-right:2px;}
-->
</style>

<script>
function cambiarPagina(pag) {

if(pag == "a") {
document.all["b"].style.display='hidden';
document.all["b"].style.position='absolute';
document.all["c"].style.display='hidden';
document.all["c"].style.position='absolute';
document.all["a"].style.display='block';
document.all["a"].style.position='relative';
}
if(pag == "b") {
document.all["a"].style.display='hidden';
document.all["a"].style.position='absolute';
document.all["c"].style.display='hidden';
document.all["c"].style.position='absolute';
document.all["b"].style.display='block';
document.all["b"].style.position='relative';
}
if(pag == "c") {
document.all["a"].style.display='hidden';
document.all["a"].style.position='absolute';
document.all["b"].style.display='hidden';
document.all["b"].style.position='absolute';
document.all["c"].style.display='block';
document.all["c"].style.position='relative';
}
}
</script>

<div class="barratopgeneral"><div class="barratopgeneral2">
  <div class="barratopindividual" style="border-right:1px solid #666666;"><a href="#" onClick="cambiarPagina('a')">Menu 1 </a></div>
  <div class="barratopindividual" style="border-right:1px solid #666666;"><a href="#" onClick="cambiarPagina('b')">Menu 2 </a></div>
  <div class="barratopindividual"><a href="#" onClick="cambiarPagina('c')">Menu 3 </a></div>
</div>
</div>
<div id="a" class="barratopgeneral3" style="display:block;position:relative;">1 asdasd</div>
<div id="b" class="barratopgeneral3" style="display:none;position:absolute;">2 asdada</div>
<div id="c" class="barratopgeneral3" style="display:none;position:absolute;">3 asdasdas</div> 

Lo que deberia de hacer es que al clickar en Menu 1 se vea el div a, al darle al 2 el div b, y al darle al 3 solo el c. Esto funciona si lo hago en orden, es decir, primero le doy al Menu 1, luego al 2 y finalmente al 3, pero si le doy al 3 y luego al 1 el div c no se me oculta, alguien sabe xk y como arreglarlo?

Gracias

[caricatos]

Hola:

Te recomiendo que te olvides de "document.all" porque tarde o temprano tendrás que hacer funcionar tus páginas en un navegador que no sea explorer y tendrás problemas... lo que funciona en todos es a partir del id usando document.getElementById()... y para simplificar puedes crear un alias...

Código:

function tag(id) {return document.getElementById(id);}

Luego a cada tag que tengas que referenciar le asignas un id (siempre único en la página) y yastá...

Para los estilos, he visto que en alguna parte pones display hidden y display debe ser inline, block o none...

Ahora, con respecto a tu cometido, puedes guardar la página visible en una variable global, y al usar tu función, ocultar la visible, mostrar la nueva y actualizar la variable global...

var activa = "a";
function cambiarPagina(pag) {
tag(activa).style.display = "none";
activa = pag;
tag(activa).display = "block";
}

Además no creo que sirva de nada las asignaciones del estilo position.

Saludos

[JavierB]

Hola carlosgs91

Echa un vistazo a este mensaje:

http://www.forosdelweb.com/f13/texto...gables-486123/

Saludos,

[caricatos]

Menudo choque

Hola JavierB: Tenía puesto el intermitente ... tanto tiempo sin chocar.

[carlosgs91]

caricatos, da igual, sigue fallando:

Código HTML:

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a:link {
	color: #0066CC;
}
a:visited {
	color: #0066CC;
}
a:hover {
	color: #0066CC;
}
a:active {
	color: #0066CC;
}
.barratopgeneral {

}
.barratopgeneral2 {
width:606px;
height:22px;
background-color:#CCCCCC;
padding:5px;
border:1px solid #666666;}
.barratopgeneral3 {
width:606px;
height:22px;
background-color:#DBDBDB;
padding:5px;
border:1px solid #666666;}
.barratopindividual {
width:195px;
float:left;
margin-right:2px;}
.barratopindividual2 {
background-color:#999999;
width:195px;
float:left;
margin-right:2px;}
-->
</style>

<script>
function cambiarPagina(pag) {

if(pag == "a") {
document.getElementById('b').style.display='hidden';
document.getElementById('b').style.position='absolute';
document.getElementById('c').style.display='hidden';
document.getElementById('c').style.position='absolute';
document.getElementById('a').style.display='block';
document.getElementById('a').style.position='relative';
}
if(pag == "b") {
document.getElementById('a').style.display='hidden';
document.getElementById('a').style.position='absolute';
document.getElementById('c').style.display='hidden';
document.getElementById('c').style.position='absolute';
document.getElementById('b').style.display='block';
document.getElementById('b').style.position='relative';
}
if(pag == "c") {
document.getElementById('a').style.display='hidden';
document.getElementById('a').style.position='absolute';
document.getElementById('b').style.display='hidden';
document.getElementById('b').style.position='absolute';
document.getElementById('c').style.display='block';
document.getElementById('c').style.position='relative';
}
}
</script>

<div class="barratopgeneral"><div class="barratopgeneral2">
  <div class="barratopindividual" style="border-right:1px solid #666666;"><a href="#" onClick="cambiarPagina('a')">Menu 1 </a></div>
  <div class="barratopindividual" style="border-right:1px solid #666666;"><a href="#" onClick="cambiarPagina('b')">Menu 2 </a></div>
  <div class="barratopindividual"><a href="#" onClick="cambiarPagina('c')">Menu 3 </a></div>
</div>
</div>
<div id="a" class="barratopgeneral3" style="display:block;position:relative;">1 asdasd</div>
<div id="b" class="barratopgeneral3" style="display:none;position:absolute;">2 asdada</div>
<div id="c" class="barratopgeneral3" style="display:none;position:absolute;">3 asdasdas</div> 

Da igual que me paseis un link a textos desplegables con un código, yo lo que quiero es saber que esta mal en este.

[caricatos]

Hola:

Creo que no has leído toda la respuesta... donde puse tu misma función con menos líneas...

Código:

var activa = "a";
function tag(id) {return document.getElementById(id);}
function cambiarPagina(pag) {
tag(activa).style.display = "none";
activa = pag;
tag(activa).display = "block";
}

En tu sección script, prueba estas líneas. Además display = "hidden" no hace nada porque no es un valor para ese estilo.

Saludos

[carlosgs91]

Gracias, cierto el problema era el hidden, debia poner none

[JavierB]

Saludos caricatos

Es que entre el campeonato de motociclismo y el de formula uno, estoy un poco acelerado