Mostrando resultados del 1 al 2 de 2

Tema: Mostrar/ocultar divs en JS

  1. #1
    Recien llegado
    Fecha de Ingreso
    mayo-2009
    Mensajes
    16
    Thanked: 7

    Predeterminado Mostrar/ocultar divs en JS

    Hola, esta vez veremos como hacerle para mostrar y/u ocultar un div mediante Javascript (en el próximo post de Javascript mostraré como mostrar y/u ocultar varios divs mediante Javascript) de una forma sencilla y eficaz.

    Necesitaremos simplemente un archivo *.html el cual tendrá el div, el link a la función y por lógica la función js. Esto (al menos en mi caso) me facilita bastante a la hora de hacer aplicaciones web más dinámicas ya que el efecto que se presta es sumamente agradable. Sin más que decir, continuemos.

    Código JS:
    [code=js]
    function show_divs(capa){
    if(document.getElementById(capa).style.display=='' ) //Si esta visible se cambia a oculto
    {
    document.getElementById(capa).style.display='none' ;
    }
    else{ //Si esta oculto se cambia a visible
    document.getElementById(capa).style.display='';
    }
    }[/code]

    Código HTML:
    [code=html]<a href="#" onclick="show_divs('info');">Mostrar/Ocultar Primer div (info)</a>
    <div id="info">
    Esta es la capa (info) que se ocultara o se mostrara
    </div>[/code]

    Como podremos notar, en el código JS lo que hacemos es obtener la forma en que se muestra la capa y hacemos una condición, si esta visible ('') se oculta, y si no esta visible ('none') se muestra. En nuestro código HTML lo que hacemos es nombrar una capa con su identificador, en este caso es "info" y mediante un link con su respectivo evento "onClick" hacemos que al dar click llame a la función indicada para que muestre u oculte el id que esta en onClick, si prestan atención en el enláce tenemos "show_divs('info');" en donde show_divs pertenece al nombre de la función e info al ID de la capa.

    Ver ejemplo: [SOLO LOS USUARIOS REGISTRADOS PUEDEN VER LOS ENLACES. ]

    Tambien podemos hacer que se oculte otro div siempre y cuando tengan diferente identificador, ejemplo:

    Codigo HTML:
    [code=html]<a href="#" onclick="show_divs('info');">Mostrar/Ocultar Primer div (info)</a>
    <a href="#" onclick="show_divs('otro');">Mostrar/Ocultar Segundo div (otro)</a>
    <div id="info">
    Esta es la capa (info) que se ocultara o se mostrara
    </div>
    <div id="otro">
    Esta es la otra capa (otro) que se ocultara o se mostrara
    </div>[/code]

    Y sería exáctamente lo mismo, simplemente cambia el parámetro que se le indica a la función.

    Ver ejemplo: [SOLO LOS USUARIOS REGISTRADOS PUEDEN VER LOS ENLACES. ]

    Y pues, eso es todo, espero este pequeño tutorial les sirva a la hora de crear sus sitios webs, sin nada más que decir les dejo el link de la descarga (los demos estan arriba):

    Descargar: [SOLO LOS USUARIOS REGISTRADOS PUEDEN VER LOS ENLACES. ]

    P.D: En el próximo post de Javascript mostraré como mostrar y/u ocultar varios divs mediante Javascript, es decir, solo se mostrará un solo div por vez pero en realidad cuando uno se muestre los demás se ocultan, saludos.

  2. #2
    Recien llegado
    Fecha de Ingreso
    julio-2011
    Mensajes
    1
    Thanked: 0

    Predeterminado Respuesta: Mostrar/ocultar divs en JS

    Tmr..! Por las webas me registré para que no haya ejemplo.

Tags for this Thread

Normas de Publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •