En este post veremos los diferentes cambios que podemos hacer sobre un link con jQuery como cambiar su atributo href, desactivarlo o que abra una ventana nueva. Te recomiendo complementar este post con el de eventos jQuery para que puedas cambiar el comportamiento del vínculo en función de la acción del usuario.
Aunque parezcan que los vínculos son elementos muy básicos, son el elemento más potente cuando se emplearn técnias de JavaScript o jQuery sobre ellos ya que se mejora su funcionamiento. Añadir JavaScript a una página puede hacer que un link se convierta en un elemento fundamental en la interactividad del usuario.
Seleccionar links con jQuery
Si has estado siguiendo mis posts, habrás leído cómo se seleccionan elementos con jQuery, sino, daré un repaso super rápido. jQuery nos da una flexibilidad considerable a la hora de seleccionar los elementos de un documento. Si escribireramos este código
|
1 |
$('a') |
estaríamos seleccionando todos los links que hay en la página. Sin embargo, si quieres seleccionar los links que están dentro de otro elemento, por ejemplo, los vínculos dentro de un elemento con el ID menu
|
1 |
$(#menu a) |
Una vez que sabes cómo seleccionar los vínculos, vamos a ver que podemos hacer con ellos.
Cambiar el href de un link con jQuery
Para poder cambiar el atributo href de un link en jQuery, bastará con usar la función attr() que ya usé en otra ocasión. Por ejemplo, podemos obtener la url del vínculo de la siguiente forma
|
1 2 3 |
var vinculo = $('#inicio').attr('href'); alert(vinculo); |
Si quieres cambiar la dirección, bastará que pongas como segundo parámetro de la función la url que quieras.
|
1 2 3 4 5 |
<a href ="http://google.com">Ir</a> <script> $('#inicio').attr('href', 'https://guidacode.com'); </script> |
En cuanto le des al enlace, en vez de ir a Google irá a Guidacode 😉
Como comentaba hace un momento, nosotros podemos seleccionar todos los vínculos de la página o de un elemento. Vamos a poner 3 enlaces y cambiar la URL de todos ellos.
|
1 2 3 4 5 6 7 8 9 10 11 |
<a href ="http://google.com">Ir</a> <a href ="http://codepen.io">Ir</a> <a href ="http://wikipedia.org">Ir</a> <script> $('a').each(function() { $(this).attr('href', 'https://guidacode.com'); }); </script> |
Con each(), recorremos cada elemento de la selección. Para hacer referencia al elemento que estamos recorriendo en ese momento empleamos $(this). Si tienes dudas con $(this) te recomiendo este post que escribí en su momento.
Desactivar links con jQuery
Cuando clicamos en un enlace, es posible que no queramos que nos redirija a otra página porque queremos usarlo como un botón por ejemplo. Existen diversas formas para desactivar un link con jQuery.
Como la acción natural de un enlace se produce al clicar sobre el, será preciso indicar a jQuery que lo desactive cuando cliquemos en él.
|
1 2 3 4 5 6 7 8 9 10 |
<a id="desactivado" href ="https://guidacode.com">Intentar</a> <script> $('#desactivado').click(function() { alert("Vaya, no nos hemos movido"); return false; }); </script> |
En esta ocasión hemos empleado un return false al final para que el vínculo no nos redirija. Otra forma de hacerlo es invocando al método y usando la preventDefault().
|
1 2 3 4 |
$('#desactivado').click(function(evt) { alert("Vaya, no nos hemos movido"); evt.preventDefault(); }); |
Nosotros pasamos a la función el objeto event (evt). Este objeto tiene sus funciones y propiedades, en este caso hemos usado el método preventDefault() para parar el comportamiento por defecto asociado con el evento (Si clicamos en el enalce, su comportamiento es llevarnos a otra página).
Abrir enlace en nueva ventana con jquery
En muchas páginas web, incluida esta, muchos de los vínculos se abren en una ventana nueva. Hay diversas razones, una de ellas es que cuando un usuario clica en un enlace no queremos que se «vaya» y abrimos el destino de ese enlace en otra ventana . Otra razón, como puede pasar en esta web, es que si estás leyendo uno de mis tutoriales y te pongo una referencia, para que te resulte más cómodo lo abro en otra ventana para que más adelante puedas continuar leyendo el post desde donde lo dejaste.
Para que un link se bara en otra ventana tiene que tener el atributo target =»_blank». Al ser un atributo podremos manipularlo con jQuery. Supongamos que quieres que los enlaces de una clase en concreto se abran en otra ventana.
|
1 |
$('.externo').attr('target','_blank'); |
También podríamos ser mucho más específicos e indicar que sólo se abran en otra ventana los que no tengan un enlace en concreto. Por ejemplo, quiero que todos los enlaces que no tengan como comienzo la URL https://guidacode.com se abran en otra ventana.
|
1 2 3 4 5 6 |
<a href="https://guidacode.com">Gudiacode</a> <a href="http://codepen.io">Codepen</a> <script> $("a[href]:not([href^='https://guidacode.com'])").attr('target','_blank'); </script> |
La función :not() que nos proporciona jQuery nos permite seleccionar aquellos elementos con un criterio que no coincidan, en este caso que los atributos href de otros enlaces no comiencen por la url de guidacode. Si ves que no te ha quedado demasiado claro el uso del :not() te recomiendo este post sobre filtros de jQuery.
Y hasta aquí manipular un link con jQuery, espero que os haya gustado a segui picando 🙂