» Mostrar/ocultar capas con Javascript

Mostrar/ocultar capas con Javascript

Escrito por J.F. el Thursday, 13 de September del 2007 a las 19:53

El siguiente script puede resultarnos muy Ãºtil a la hora de mostrar/ocultar ciertos elementos en una pÃ¡gina web. Por ejemplo, si quisieramos que pinchando en un enlace una capa que contuviera una tabla, una imagen, o cualquier cosa que queramos se ocultara, simplemente debemos jugar con el atributo visibility, poniÃ©ndolo a `visible`(para mostrarlo) o a `hidden`(para ocultarlo).La forma comÃºn de cambiar la visibilidad de una capa es la siguiente:

Ocultar:
document.getElementById('nombre_div').style.visibility = "hidden";
Mostrar una capa oculta:
document.getElementById('nombre_div').style.visibility = "visible";

Todo ello con Javascript. Simplemente con un poco de imaginaciÃ³n podemos conseguir efectos realmente llamativos. AquÃ tienes un cÃ³digo extremadamente simple que sirve para ilustrar el tema:

TEXTO PLANO

HTML:

<html>

<head>

<script LANGUAGE="javascript">

function oculta(){

document.getElementById('capa1').style.visibility = "hidden";

}

function muestra(){

document.getElementById('capa1').style.visibility = "visible";

}

</script>

</head>

<body>

<div id="capa1" style='position:relative;'>

Esta es la capa 1

</div>

<a href="#" onclick="oculta()">Oculta la capa 1</a>

<a href="#" onclick="muestra()">Muestra la capa 1</a>

</body>

</html>

Comentarios (2)

Categoria: Javascript

Añadir este post a

Del.icio.us -

Meneame -

Digg -

Webeame

2 Comentarios

Entradas relacionadas

Comentario de Ruben

Realizado el Tuesday, 15 de November del 2011 a las 20:52

Buena caballo!! Me sacaste de un lío!
MUCHAS GRACIAS!!!

Comentario de Francisco

Realizado el Thursday, 24 de November del 2011 a las 13:46

Muchas gracias me sirvió un montón, lo ocupé en lo siguiente (a alguien le puede servir)
desde php recivo la cantidad de veces que quiero repetir un el div que a su vez quiero que se muestre u oculte segun un select, asi que en el select llamo:
onChange="selectChange();


function selectChange(){

var i=

for (n=0; n<=i; n++)

{

if((document.getElementById('select_estado_'+n).value == "aprobado")){

document.getElementById('div_comentario_'+n).style.visibility="hidden";								}else{

document.getElementById('div_comentario_'+n).style.visibility ="visible";

	}

}

}

si el select dice “aprobado” => el div se oculta

saludos y gracias por el aporte
pd: espero que los tag de “code” esten bien

Escribir un comentario