Mostrar contenido al hacer clic

gesking · #1 (**permalink**) 16/08/2011, 10:15

Hola, tengo un pequeño problema y no se como resolverlo.

Tengo un panel de administracion donde en un sector subo archivos mp3. Estos archivos se dividen en 3 tipos diferentes: Locales, Regionales y Portada.

Para subir un mp3 se muestran 3 tipos de divs diferentes (dentro de cada uno un formulario con un input select y un boton). Es decir, hay 3 div diferentes y 3 formularios diferentes.

La idea es crear un menu horizontal con 3 botones (locales, regionales y portada) y al hacer clic en locales se muestre el div correspondiente y se oculten los otros 2. Asi para los otros 2 botones mas.

Se que se puede hacer con javascript, pero no tengo conocimientos.

PD: TIENE QUE FUNCIONAR POR LO MENOS EN MOZILLA, IE Y CHROME.

GRACIAS

skiper0125 · #2 (**permalink**) 16/08/2011, 10:42

Hola que tal.

te recomiendo que pases por las FAQ'S de este foro en donde encontraras muchos ejemplos, te dejo uno Mostrar, ocultar capas

saludos

gesking · #3 (**permalink**) 16/08/2011, 11:13

Gracias. Me sirvio bastante, solo por un detalle.....

Cuando hago clic en Locales aparece el div Locales. Ahora, cuando hago clic en Regionales me queda Locales y Regionales.

La idea es, por ejemplo, hago clic en Locales, me las muestra, luego hago clic en regionales y me deberia ocultar locales y mostrar regionales.... se entiende?

Aca el cod de la web:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
	<title>Ocultar Elementos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		function cambio(idCapa){
			var capa = document.getElementById(idCapa);
			capa.style.display = (capa.style.display == "none") ? "block" : "none";
		}
	</script>
</head>
<body>
	<div>
		<div id="capa1">
			Esta es la capa 1
		</div>
		<div id="capa2">
			Esta es la capa 2
		</div>
		<a href="#" onclick="cambio('capa1')">Muestra/oculta la capa 1</a>
		<a href="#" onclick="cambio('capa2')">Muestra/oculta la capa 2</a>
	</div>
</body>
</html>