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