Foros del Web » Programando para Internet » Jquery »

Mostrar y ocultar capa con jquery??

Estas en el tema de Mostrar y ocultar capa con jquery?? en el foro de Jquery en Foros del Web. Hola gente, tengo un problema, intente de muchas maneras pero no logro conseguir lo que busco, es decir yo tengo una imagen que contiene un ...
  #1 (permalink)  
Antiguo 28/02/2012, 22:41
Avatar de tata009  
Fecha de Ingreso: septiembre-2008
Ubicación: En mi casa
Mensajes: 426
Antigüedad: 15 años, 7 meses
Puntos: 3
Mostrar y ocultar capa con jquery??

Hola gente, tengo un problema, intente de muchas maneras pero no logro conseguir lo que busco, es decir yo tengo una imagen que contiene un enlace y quiero que al hacer click se cambie la propiedad de una tabla que tengo en la pag (display:none) por (display:block) es decir para mostrarla, pero no logro conseguirlo :S como podria hacer??

El ultimo codigo que probe era:

Cita:
<script type="text/javascript">

$(document).ready(function(){
$("#mostrar").click(function(){
$("#capa1").show("slow");
});


</script>



bueno el enlace
Cita:
<a href="#" id="mostrar">ASDA</a>
y mi taabla obviamente
Cita:
<table id="capa1" style="display:none">etcetc </table>


Saludos, gracias de antemano!
__________________
SI pones un CD de MIcrosoft al reves aparecen mensajes satanicos pero si lo pones a la derecha PEOR SE TE INSTALA WINDOWS!!!!
Para webmasters e informaticos

Última edición por tata009; 28/02/2012 a las 23:20
  #2 (permalink)  
Antiguo 28/02/2012, 23:21
Avatar de rigobcastro  
Fecha de Ingreso: febrero-2012
Ubicación: Lejanías
Mensajes: 69
Antigüedad: 12 años, 2 meses
Puntos: 21
Respuesta: Mostrar y ocultar capa con jquery??

Para incluir el atributo "display:block;" se hace con la funcion $.show() de jQuery.

Acá un ejemplo:

Código HTML:
Ver original
  1. <a id="mostrar" href="#"><img src="http://lorempixel.com/200/200/"></a>
  2.  
  3. <table id="tabla" style="display:none;">
  4.     <tr>
  5.         <th colspan="2">Tabla</th>
  6.     </tr>    
  7.     <tr>
  8.         <td>row 1, cell 1</td>
  9.         <td>row 1, cell 2</td>
  10.     </tr>
  11.     <tr>
  12.         <td>row 2, cell 1</td>
  13.         <td>row 2, cell 2</td>
  14.     </tr>

Esto se corré ya teniendo la libreria jQuery cargada en la página.

Código Javascript:
Ver original
  1. $(function(){
  2.     $("#mostrar").click(function(e){
  3.         e.preventDefault();
  4.         $("#tabla").show();
  5.     });
  6. });

Puedes ver el ejemplo online via jsfiddle: http://jsfiddle.net/8BRrF/embedded/result/
  #3 (permalink)  
Antiguo 29/02/2012, 06:28
Avatar de tata009  
Fecha de Ingreso: septiembre-2008
Ubicación: En mi casa
Mensajes: 426
Antigüedad: 15 años, 7 meses
Puntos: 3
Respuesta: Mostrar y ocultar capa con jquery??

Buenisimo maestro me anduvo! y si quisiera mostrar y al mismo tiempo ocultar la tabla con el mismo enlace como haria??


Saludos abrazo!
__________________
SI pones un CD de MIcrosoft al reves aparecen mensajes satanicos pero si lo pones a la derecha PEOR SE TE INSTALA WINDOWS!!!!
Para webmasters e informaticos

Última edición por tata009; 29/02/2012 a las 07:07
  #4 (permalink)  
Antiguo 29/02/2012, 09:20
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 15 años, 8 meses
Puntos: 87
Respuesta: Mostrar y ocultar capa con jquery??

Hola,

Para mostrar y ocultar con el mismo enlace podrías usar toggle() o fadeToggle():

Código Javascript:
Ver original
  1. $(function(){
  2.     $("#mostrar").click(function(e){
  3.         e.preventDefault();
  4.         $("#tabla").fadeToggle();
  5.     });
  6. });

Saludos.
  #5 (permalink)  
Antiguo 29/02/2012, 10:54
Avatar de tata009  
Fecha de Ingreso: septiembre-2008
Ubicación: En mi casa
Mensajes: 426
Antigüedad: 15 años, 7 meses
Puntos: 3
Respuesta: Mostrar y ocultar capa con jquery??

Muchisimas gracias! ;)
__________________
SI pones un CD de MIcrosoft al reves aparecen mensajes satanicos pero si lo pones a la derecha PEOR SE TE INSTALA WINDOWS!!!!
Para webmasters e informaticos

Etiquetas: capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:13.