Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje26-04-2009, 16:29 (UTC)    
Título del mensaje: [Código Javascript] Ocultar y mostrar contenido en capas
Responder citando
Con este codigo web podran ocultar contenido y ala ves coltarlo de una forma de un menu dinamico horizontal

Código:
<html>
<head>
<script>
var capas = ["capa1", "capa2", "capa3", "capa4", "capa5"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>

<style type="text/css">
<!--
#capa1, #capa2, #capa3, #capa4, #capa5  {display: none;}

.enlace01 a {color:#6699CC; text-decoration:none; font-weight:bold}
.enlace01 a:hover {color:#006699; font-weight:bold; text-decoration:none}
-->
</style>
</head>
<body class="enlace01">
<a style="cursor:pointer" onclick="mostrar('capa1')"> mostrar capa 1 </a> &raquo;
<a style="cursor:pointer" onclick="mostrar('capa2')"> mostrar capa 2 </a> &raquo;
<a style="cursor:pointer" onclick="mostrar('capa3')"> mostrar capa 3 </a> &raquo;
<a style="cursor:pointer" onclick="mostrar('capa4')"> mostrar capa 4 </a> &raquo;
<div id="capa1" >
<a style="cursor:pointer" onclick="mostrar('capa5')">contenido de capa1</a>
</div>
<div id="capa5" >
contenido de capa5 wedmasterayuda.es.tl
</div>
<div id="capa2" >
contenido de capa2 wedmasterayuda.es.tl
</div>
<div id="capa3" >
contenido de capa3 wedmasterayuda.es.tl
</div>
<div id="capa4" >
contenido de capa4 wedmasterayuda.es.tl
</div>
</body>


Con este codigo web podran ocultar contenido y ala ves coltarlo de una forma de un menu dinamico vertical

Código:
<html>
<head>

<script>

OCULTO="none";
VISIBLE="block";
   
function mostrar1(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off1').style.display=VISIBLE;
  document.getElementById('ver_on1').style.display=OCULTO;
}
 
function ocultar1(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off1').style.display=OCULTO;
  document.getElementById('ver_on1').style.display=VISIBLE;
}
</script>

<script>

OCULTO="none";
VISIBLE="block";
   
function mostrar2(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off2').style.display=VISIBLE;
  document.getElementById('ver_on2').style.display=OCULTO;
}
 
function ocultar2(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off2').style.display=OCULTO;
  document.getElementById('ver_on2').style.display=VISIBLE;
}
</script>


<script>

OCULTO="none";
VISIBLE="block";
   
function mostrar3(blo) {
  document.getElementById(blo).style.display=VISIBLE;
  document.getElementById('ver_off3').style.display=VISIBLE;
  document.getElementById('ver_on3').style.display=OCULTO;
}
 
function ocultar3(blo) {
  document.getElementById(blo).style.display=OCULTO;
  document.getElementById('ver_off3').style.display=OCULTO;
  document.getElementById('ver_on3').style.display=VISIBLE;
}
</script>


</head>
<body>

<div id="ver_on1"><a href="#" onclick="mostrar1('bloque1'); return false">Mostrar bloque1</a></div>

<div id="ver_off1" style="display: none"><a href="#" onclick="ocultar1('bloque1'); return false">Ocultar bloque1</a></div>

<div id="bloque1" style="display: none">
<p>Contenido bloque1wedmasterayuda.es.tl</p>
</div>

<div id="ver_on2"><a href="#" onclick="mostrar2('bloque2'); return false">Mostrar bloque2</a></div>

<div id="ver_off2" style="display: none"><a href="#" onclick="ocultar2('bloque2'); return false">Ocultar bloque2 </a></div>

<div id="bloque2" style="display: none">
<p>Contenido bloque2 wedmasterayuda.es.tl</p>
</div>

<div id="ver_on3"><a href="#" onclick="mostrar3('bloque3'); return false">Mostrar bloque3</a></div>

<div id="ver_off3" style="display: none"><a href="#" onclick="ocultar3('bloque3'); return false">Ocultar bloque3</a></div>

<div id="bloque3" style="display: none">
<p>Contenido bloque3 wedmasterayuda.es.tl</p>
</div>

</body>
</html>


¿El código no funciona?, comunícaselo a un Moderador CLICK AQUÍ
______________









Ultima edición por wedmasterayuda el Sab May 16, 2009 6:20 pm; editado 3 veces
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.