Estás en: Inicio >> Foros >> Informática >> Webmasters >> Desarrollo Web
Desarrollo Web /

[JAVASCRIPT] mostrar y ocultar divs

Participa en el tema [JAVASCRIPT] mostrar y ocultar divs en el foro Desarrollo Web.
hola, tengo una duda, tengo una web con una barra de botones con rollovers hecha ...

Buscar en este tema:
Búsqueda avanzada
Respuesta
 
  • desconectado

    • 164

      MENSAJES

     
    ryuseiken escribió el 11/11/2007 a las 18:44 hs.
     
    ¿Mensaje inapropiado?
    #1 [JAVASCRIPT] mostrar y ocultar divs
    hola, tengo una duda, tengo una web con una barra de botones con rollovers hecha en fireworks y en mi web quiero insertar varios divs, pero que solo uno este visible, como puedo hacer para que al clickear en los botones mostrar un div especifico y asignarle hidden a todos los demas? gracias

    Responder a este tema

    Citar

    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/desarrollo-web.264/564602-javascript-mostrar-y-ocultar-divs.html
    | Más
  •  
    desconectado

    • 2,192

      MENSAJES

    Diego [Otto] escribió el 11/11/2007 a las 18:59 hs. ¿Mensaje inapropiado?

    #2 Re: mostrar y ocultar divs

    Código HTML:
    <html>
<head>
<script language="javascript" type="text/javascript">
function mostrar(div)
    {
        document.getElementById('div1').style.visibility = 'hidden'; /* y repetis esto por cada div, o lo haces automatico */
        document.getElementById('div2').style.visibility = 'hidden';
        document.getElementById('div3').style.visibility = 'hidden';
        document.getElementById(div).style.visibility = 'visible'; /* mostras el que queres mostrar */
    }
</script>

<style type="text/css">
    * div { background-color: red; visibility: hidden; height: 100px; width: 100px; }
</style>
</head>

<body>
<input type="button" value="Mostrar div1" onClick="mostrar('div1')" />
<input type="button" value="Mostrar div2" onClick="mostrar('div2')" />
<input type="button" value="Mostrar div3" onClick="mostrar('div3')" />
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 1,836

      MENSAJES

    Log@n escribió el 11/11/2007 a las 19:56 hs. ¿Mensaje inapropiado?

    #3 Re: mostrar y ocultar divs

    Lo que si eso solo los oculta, pero siguen ocupando espacio. Si queres que desaparezcan completamenete (osea que no quede el espacio):
    Código HTML:
    // En vez de:
*.style.visibility = 'hidden';
// usas
*.display = 'none';

// En vez de:
*.style.visibility = 'visible';
// usas
*.style.display = 'block';

// Y en el <style> cambias
visibility:hidden;
// por
display: none;
    Se me hace que es mejor ocultar asi porque entonces no te queda el espacio, sino que se reacomoda.

    Responder

    Citar

    Me gusta este mensaje
  •  

    • n/a

      MENSAJES

    Usuario inexistente escribió el 11/11/2007 a las 20:21 hs. ¿Mensaje inapropiado?

    #4 Re: mostrar y ocultar divs

    En mi blog puse algo para eso y está explicado parte por parte.

    te dejo el blog: Mostrar y ocultar div con javascript

    Responder

    Citar

    Me gusta este mensaje
  •  
    desconectado

    • 2,192

      MENSAJES

    Diego [Otto] escribió el 11/11/2007 a las 20:46 hs. ¿Mensaje inapropiado?

    #5 Re: mostrar y ocultar divs

    Lo de que sigan ocupando espacio lo dejé por una cuestión de que el usuario no dijo que debían desaparecer por completo, sinó ponía display: none y pa' las' casa'

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 164

      MENSAJES

    ryuseiken escribió el 11/11/2007 a las 21:04 hs. ¿Mensaje inapropiado?

    #6 Re: mostrar y ocultar divs

    antes que nada gracias a todos por sus respuestas, las voy a probar, tendria que ver las opciones que me plantean sobre ocultar o que directamente no este, la idea es que son varios divs del mismo tamaño y en la misma posicion, y de acuerdo a la opcion que se seleccione mostrar uno u otro

    Responder

    Citar

    Me gusta este mensaje
  •  
    desconectado

    • 2,192

      MENSAJES

    Diego [Otto] escribió el 11/11/2007 a las 21:37 hs. ¿Mensaje inapropiado?

    #7 Re: mostrar y ocultar divs

    Lo que pasa es que cuando pones display: none... el espacio ocupado por ese div, se 'vacía'.. o sea que si por ejemplo tenes dos imágenes.. y en el medio un div de 100 PX de ancho.. y le asignas display: none... esos 100 PX se vuelven 0px... en cambio, visibility: none deja esos 100PX pero no se ve el div

    Responder

    Citar

    Me gusta este mensaje
  • desconectado

    • 1,836

      MENSAJES

    Log@n escribió el 11/11/2007 a las 21:48 hs. ¿Mensaje inapropiado?

    #8 Re: mostrar y ocultar divs

    Claro todo depende de lo que necesites hacer. Si lo que necesitas es reemplazar ese espacio por otro div usas el display:none, si lo que necesitas es "desaparecer" algo pero que el espacio siga estando (por ejemplo para que no se te descajete el sitio :P) usas el visibility:hidden;
    Segun lo que entendi en tu ultimo post vos vas a reemplazar, ya que decis que tienen = tamaño e = posicion, asi que creo que en este caso deberias usar el 'display'.

    Responder

    Citar

    Me gusta este mensaje
  •  
    desconectado

    • 2,192

      MENSAJES

    Diego [Otto] escribió el 11/11/2007 a las 21:58 hs. ¿Mensaje inapropiado?

    #9 Re: mostrar y ocultar divs

    Si estan en la misma posición, vas a tener que usar display: none

    Responder

    Citar

    Me gusta este mensaje
Estás en: Inicio >> Foros >> Informática >> Webmasters >> Desarrollo Web


Estadísticas del tema
  • 8 RESPUESTAS
  • 13487 VISTAS
  • 4 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB