Foros del Web - Ver Mensaje Individual

Reedyseth · #8 (**permalink**) 02/07/2013, 10:00

Que tal @franjgg,

El trabajar con eventos de Javascript puede ser algo confuso al principio, de hecho si estas trabajando en una aplicación debes de considerar que tu aplicación funcione en todos, si no es que en todos los exploradores. Tu mayor problema va a ser Internet Explorer. Por lo tanto puedes tomar dos caminos:

1.- Hacer crossbrowser tu código javascript

2.- Utilizar un API llamado jQuery y que este se encargue de eso.

Para resolver tu duda te pongo un ejemplo con jQuery, utilizo la versión 1.7.2, si utilizas la versión mas nueva necesitaras cambiar el código que te comparto.

Código Javascript:

Ver originaljQuery(function($) {
 
    $('.hidden').hide();
 
    $('.link').click(function (e) {
        e.preventDefault();
        $('.hidden').toggle();
 
        return false;
    });
});

Basicamente lo que hace el código es ocultar los inputs y controlar el evento del click en tu link.

El código que puedes copiar y pegar para que lo pruebes es el siguiente:

Código HTML:

Ver original<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery load with content and effect.</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
 
                $('.hidden').hide
 
                $('.link').click(function (e) {
                    e.preventDefault();
                    $('.hidden').toggle();
 
                    return false;
                });
            });
        </script>
        <style type="text/css">
            body { font-family:Arial, Helvetica, Sans-Serif; font-size:1.2em;}
            table {font-size:1.2em;}
            td:nth-child(1) label {background-color: #E655C1;}
        </style>
    </head>
    <body>
        <form action="#" method="post">
            <label for="txt1">Input 1:</label>
            <input type="text" name="txt1" id="txt1" /><br><br>
 
            <a class="link" href="#">Link</a><br><br>
 
            <label class="hidden" for="txt2">Input 2:</label>
            <input class="hidden" type="text" name="txt2" id="txt2" /><br>
 
            <label class="hidden" for="txt3">Input 3:</label>
            <input class="hidden" type="text" name="txt3" id="txt3" /><br><br>
 
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

La funcionalidad es:

Al darle click controlamos el evento que se va realizar en el link, osea detenemos que se vaya a la dirección, aún cuando hayas puesto una anlca (#)
Si esta oculto los inputs se muestran, si no viceversa, esto lo hace la función toggle().
Regresamos un valor false para ayudar a evitar la propagación del evento disparado por el tag 'a'

No dudes en preguntar si batallas con algo.