Link en un DIV con Jquery

Hola lectores :), en esta ocasión me da mucho gusto escribir, ya que aunque en este momento estoy muy cansado (vengo llegando del trabajo) logramos terminar todo lo que teníamos que hacer junto con el equipo de desarrolladores :).

Ahora si de lo que trata este post es lo siguiente, un pequeño truco con jquery pero que es muy útil es encontrar elementos dentro de otros elementos que hayamos elegido con nuestro selector, queremos hacer que un div sea clickeable, ¿para que nos puede servir esto?, podemos diseñar bonitos botones y agregarle todo el CSS y el diseño que queramos y no estar solamente limitados a que sea un link comun y corriente.

El código Javascript para hacer eso es el siguiente:

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

Aqui estamos indicando que cuando se haga click en nuestro div con clase mybox
<div class="mybox">

la pagina sera redireccionada (window.location) al valor que tenga el atributo href del elemento a (un link) que este contenido dentro del div :), si nuestro div no tuviera una clase sino un id (identificador) entonces quedaría de la siguiente forma:
$("#myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

# = identificadores, . = clases.

Y por ultimo el html seria algo como esto:

<div class="myBox">
     Texto del boton
    <a href="http://google.com">link</a>
</div>

Si quisieran mostrar solamente el texto dentro del div y no el link podrían el siguiente código en su hoja de estilos
.mybox a
{
     display:none;
}

Con lo anterior el link quedaría invisible y solo se visualizaría el texto.

salu2

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *