Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botón, cambiaremos el texto y
al pulsar el otro pondremos otro texto distinto.
Podemos ver el ejemplo en marcha en una página aparte.
En este ejemplo tenemos una capa que tiene este código
<div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botón</div>
Luego tenemos dos botones con estos códigos:
<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">
<input type="button" value="Botón A" onclick="$('#capa').html('Has hecho clic en el botón <b>A</b>')">
<input type="button" value="Botón B" onclick="$('#capa').html('Recibido un clic en el botón <b>B</b>')">
Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instrucción
Javascript cuando se hace clic sobre ellos. La instrucción está en Javascript, pero hace uso de algunas herramientas
disponibles en jQuery para trabajo con los elementos de la página. En este caso, por explicarlo rápidamente, se hace una
selección del elemento DIV de la capa y luego se ejecuta un método sobre él para cambiar el contenido HTML del
elemento.
No hay comentarios:
Publicar un comentario