Mostrar y ocultar div en un menu funcion en javascript

KingColt · #1 (**permalink**) 03/05/2008, 13:06

Hola, estoy haciendo una especie de menu categorias y dentro de estas productos todo en html, lo que necesito es una funcion en javascript para ocultar y/o mostrar los div's que contienen los productos al hacer click en una categoria, pero solo se deben visualizar los productos de una categoria.
Me explico mas detalladamente si hago click en hardware se mostraran los productos y si hago click en software se ocultara lo anterior y visualizaran los productos de software, aqui dejo mi codigo html

Código:

<html>
<head>
<style>
#fuente1 {color:#FF0000}
</style>
</head>
<body> 
<h1>Productos</h1> 
<a href="#" id="fuente1">hardware</a><br>
<div style="display:none;">
    <li><a href="#">lectoras de cd</a></li>
   <li><a href="#">discos duro</a></li>  
</div>

<a href="#" id="fuente1">software</a><br>
<div style="display:none;">
    <li><a href="#">windows xp</a></li>
    <li><a href="#">microsoft office 2003</a></li>
</div>

<a href="#" id="fuente1">otros</a><br>
<div style="display:none;">
    <li><a href="#">libros de programacion</a></li>
    <li><a href="#">revistas</a></li> 
</div>

</body> 
</html>

Como veran ya he ocultado los div's con los productos mediante el style:none

JavierB · #2 (**permalink**) 03/05/2008, 15:28

Hola KingColt

En primer lugar, decirte que no se puede poner el mismo id a varios elementos.

En segundo lugar, echa un vistazo a este enlace:

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

Saludos,

a2a2 · #3 (**permalink**) 03/05/2008, 15:48

Cita:

Iniciado por JavierB

En primer lugar, decirte que no se puede poner el mismo id a varios elementos.

Bueno, lo que se dice "poder" en realidad si se puede; de hecho él lo está haciendo.
Pero no se "debe", al menos si pretendes referenciarlos/buscarlos con funciones DOM y que te funcione.

Monimo · #4 (**permalink**) 04/05/2008, 11:10

Bien ahora debes de crear una función que te cambie el none a block asi:

Código HTML:

function habilita_div()
{
var elec=document.getElementById('el id en este caso de un select');
var div1=document.getElementById('vgc1'); //aqui el nombre del div pueves declarar todos de una vez

if(elec.options[1].selected==true)
{
div1.style.display='block'; //uno lo muestra
div2.style.display='none'; //y el otro lo deja sin mostrar
}

else
{
if(elec.options[2].selected==true)
{
div2.style.display='block';
div1.style.display='none';
}
}

pero si debes cambiarle los ids a cada div, como su nombre lo ice los id's son IDENTIFICADORES asi que e debe dinstinguirlos de los demas ok? bueno suerte!