Hola a ver si alguien me puede echar la mano, llevo varios dias intentando varias cosas y no doy con el error:
todo el script, html y css estan aqui:
http://www.wdinamo.com/pruebas/activaoculta.php
lo que necesito hacer es que al escojer un enlace me muestre el div correspondiente y el boton quede diferenciado de alguna manera...
hasta aqui lo consigo pero solo en iexplorer, en firefox sólo se ilumina mientes doy click pero no se queda asi.
otro problema que tengo es que cuando le doy click al que ya esta seleccionado se vuelve a ocultar.
aqui esta mi css muy básico
Código:
<style type="text/css">
body{
background-color:#FFF;
font:15px "Trebuchet MS", Helvetica, Arial, sans-serif;
}
#contenido{
clear:both;
}
#menu ul{
list-style-type:none;
margin:0; padding:0;
}
#menu ul li{
display:block;
float:left;
text-align:center;
}
#menu ul li a{
display:block;
width:150px;
height:25px;
background-color:#ddd;
margin:2px;
border:1px solid gray;
text-decoration:none;
}
#menu ul li a:active{
background-color:red;
}
#pad1,#pad2,#pad3{
width:500px;
height:300px;
border:1px solid gray;
display:none;
}
</style>
aqui el script
Código:
<script type="text/javascript">
//el pad que va por default
var defaultItems= "2"
//declaro el pad previo vacio al empezar la funcion
var prevpad=""
function activaDesactiva(N) {
//declaro que el pad X es igual que el pad seleccionado
var padX = document.getElementById('pad'+N);
//declaro que el pad seleccionado se muestre
padX.style.display ="block";
//decirle que los pads previos desaparescan
if (prevpad!="")
document.getElementById('pad'+prevpad).style.display="none"
prevpad=N
}//termina funcion activadesactiva
//lo que a continuación aparece hace que el pad default
//sea cargado al inicio del script (cuando carga la pagina)
function defaultitems(){
activaDesactiva(defaultItems);
}
if (window.addEventListener)
window.addEventListener("load", defaultitems, false)
else if (window.attachEvent)
window.attachEvent("onload", defaultitems)
else if (document.getElementById)
window.onload=defaultitems
</script>
y por aqui el contenido
Código:
<div id="menu">
<ul>
<li ><a href="#primera" id="menu1" onclick="activaDesactiva('1'); return false;">primer</a></li>
<li ><a href="#segunda" id="menu2" onclick="activaDesactiva('2'); return false;">segundo</a></li>
<li ><a href="#tercera" id="menu3" onclick="activaDesactiva('3'); return false;">tercero</a></li>
</ul>
</div>
<div id="contenido">
<div id="pad1" ><h1>1</h1>la primera capa que quiero ocultar</div>
<div id="pad2" ><h1>2</h1>la segunda capa que quiero ocultar</div>
<div id="pad3" ><h1>3</h1>la tercera capa que quiero ocultar</div>
</div>
de antemano gracias.