Foros del Web » Programando para Internet » Javascript »

Ocultar y mostrar divs con javascript

Estas en el tema de Ocultar y mostrar divs con javascript en el foro de Javascript en Foros del Web. Hola buen dia Tengo un pequeño problema que no he podido resolver. Sucede que estoy realizando una pagina web en la cual necesito mostrar u ...
  #1 (permalink)  
Antiguo 20/07/2010, 09:07
Avatar de darkangel_java  
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 0
Ocultar y mostrar divs con javascript

Hola buen dia

Tengo un pequeño problema que no he podido resolver. Sucede que estoy realizando una pagina web en la cual necesito mostrar u ocultar bloques (divs) dependiendo de el boton que seleccione, algo como esto:

Boton_1 Boton_2 Boton_3 .... Boton_N

Inicialmente mantengo ocultos todos los divs, y al dar clic por ejemplo en el Boton_1 deberia mostrarse el bloque correspondiente, y luego al dar clic por ejemplo en el Boton_3 se deberia ocultar el div del Boton_1 y mostrarse el del Boton_3, y asi para cada uno de los botones.

Algo importante es que el número de botones que aparecen , se controlan de acuerdo a una consulta a la BD usando un bucle for, y es lo que me ha dado problemas al tratar de ocultar o mostrar los bloques, pues no puedo hacer estatica la funcion de javascript porque el numero de botones no siempre será el mismo.

Espero me puedan ayudar

Gracias
  #2 (permalink)  
Antiguo 20/07/2010, 21:24
 
Fecha de Ingreso: enero-2009
Ubicación: Uruguay
Mensajes: 121
Antigüedad: 15 años, 4 meses
Puntos: 4
Respuesta: Ocultar y mostrar divs con javascript

yo uso jquery y la funcion each es la solucion para tu problema
como no pusiste ningun codigo de como se arman los div ni los botones no puedo ayudarte muy bien pero seria algo asi.

$(document).ready(function(){
$(body).find('el div').each(function(x, el){
//el seria cada div que encuentre
$(el).find('boton').click(function(){
//aca aplicarias la funcion de cada div
});
});

tire medio bolaso esperoque te ayude de guia por lo menos

y si hay algun error pasa que lo escribi a mano aca

});
__________________
www.sandant.com - Blog de Programacion y mucho mas

WWW.SPEDEVIGNER.COM SE DEJARA DE USAR EN UN MES
  #3 (permalink)  
Antiguo 21/07/2010, 08:52
Avatar de darkangel_java  
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 0
Respuesta: Ocultar y mostrar divs con javascript

Cita:
Iniciado por exxqizofrenicoo Ver Mensaje
yo uso jquery y la funcion each es la solucion para tu problema
como no pusiste ningun codigo de como se arman los div ni los botones no puedo ayudarte muy bien pero seria algo asi.

$(document).ready(function(){
$(body).find('el div').each(function(x, el){
//el seria cada div que encuentre
$(el).find('boton').click(function(){
//aca aplicarias la funcion de cada div
});
});

tire medio bolaso esperoque te ayude de guia por lo menos

y si hay algun error pasa que lo escribi a mano aca

});

Ok pondre el codigo

De esta manera se crean los "botones", que en realidad en estos momentos los manejo con listas:

<ul class="SlideTab" style="display: inline;list-style-type: none;" id="ul_<%=numPisoListado%>">
<a href="javascript:showDiv(Piso<%=numPisoListado%>); " class="SlideTab" rel="#Piso<%=numPisoListado%>">PisoNum_<%=numPisoL istado%></a>
</ul>

Este codigo se encuentra dentro de un for, y se repite de acuerdo al numero de veces que tome valor la variable numPisoListado que no siempre sera el mismo, quedando una especie de menu de la siguiente manera:

PisoNum_1 PisoNum_2 PisoNum_3 ............ PisoNum_N

Como podrán observar intenté controlar (sin éxito) si se ocultan o muestran los divs con la siguiente funcion de JavaScript:

function showDiv(divAnt)
{
var div = document.getElementById(divAnt);
if(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = 'block';

}


Aca está el div:

<div align="center" id="Piso<%=numPisoListado%>" style="display: none;">

Contenido
.
.
.
.
</div>

El div anterior se repite de igual manera que los ul de acuerdo al numero de valores que tome la variable numPisoListado,por lo que me resulta una lista del mismo tamaño de <div> y <ul>. Inicialmente los divs aparecen ocultos, esto con la propiedad display:none

Ahora lo que me falta es que al dar clic por ejemplo en PisoNum1 me muestre el div con el id Piso1, y al dar clic en el div PisoNum2 se oculte el div Piso1 y que solo me muestre el que corresponde que seria el div Piso2



Espero me haya explicado mejor
Gracias por su ayuda

Última edición por darkangel_java; 21/07/2010 a las 10:39
  #4 (permalink)  
Antiguo 26/07/2010, 08:50
Avatar de darkangel_java  
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 14 años
Puntos: 0
Respuesta: Ocultar y mostrar divs con javascript

Hola, alguien me puede ayudar??

Etiquetas: Ninguno
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 16:44.