Cómo cambiar el href para un hipervínculo usando jQuery


1267

¿Cómo puede cambiar el href para un hipervínculo usando jQuery?


12
Para aquellos de ustedes interesados ​​en soluciones sin el uso de jQuery - stackoverflow.com/questions/179713/…
Josh Crozier

1
Para versiones más nuevas de jQuery: stackoverflow.com/a/6348239/4928642
Qwertiy

1
el ejemplo más simple sin jQuery stackoverflow.com/a/39276418/696535
Pawel

Una lista completa de posibles soluciones, algunos selectores útiles y una forma de obtener el valor de las coincidencias de expresiones regulares y usarlas para actualizar href: stackoverflow.com/a/49568546/1262248
Aman Chhabra

Respuestas:


1832

Utilizando

$("a").attr("href", "http://www.google.com/")

modificará la href de todos los hipervínculos para apuntar a Google. Sin embargo, es probable que desee un selector algo más refinado. Por ejemplo, si tiene una combinación de etiquetas de anclaje de origen de enlace (hipervínculo) y destino de enlace (también conocido como "ancla"):

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

... Entonces probablemente no quieras agregarles hrefatributos accidentalmente . Por seguridad, entonces, podemos especificar que nuestro selector solo hará coincidir las <a>etiquetas con un hrefatributo existente :

$("a[href]") //...

Por supuesto, probablemente tengas algo más interesante en mente. Si desea hacer coincidir un ancla con una existente específica href, puede usar algo como esto:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Esto encontrará enlaces donde hrefcoincide exactamente con la cadena http://www.google.com/. Una tarea más complicada podría ser la coincidencia y luego actualizar solo una parte de href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Los selecciona primera parte establece enlaces sólo donde el href comienza con http://stackoverflow.com. Luego, se define una función que utiliza una expresión regular simple para reemplazar esta parte de la URL con una nueva. Tenga en cuenta la flexibilidad que esto le brinda: cualquier tipo de modificación al enlace se podría hacer aquí.


3
"en HTML, los nombres de los elementos no distinguen entre mayúsculas y minúsculas, pero en XML distinguen entre mayúsculas y minúsculas". - w3.org/TR/CSS21/selector.html
párpado

47
Para completar, ya que esto todavía se está vinculando ocasionalmente, agregaré que desde jQuery 1.4, el último ejemplo no requiere el uso each: ahora sería posible lo siguiente:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund

14
@DavidHedlund Corrección leve: te perdiste href: ...return this.href.replace(/.../, '...'); });
Armstrongest

280

Con jQuery 1.6 y superior, debe usar:

$("a").prop("href", "http://www.jakcms.com")

La diferencia entre propy attres que attrtoma el atributo HTML mientras que proptoma la propiedad DOM.

Puedes encontrar más detalles en esta publicación: .prop () vs .attr ()


32
Se agradecería una explicación de por qué debería usar propmás attr, para las personas que llegan a la pregunta y encuentran que attraparentemente funciona perfectamente bien en las nuevas versiones de jQuery ...
womble

11
El uso de @womble propes más rápido que attrporque actualiza el dom en lugar de modificar el HTML. jsfiddle.net/je4G5
Popnoodles

2
@Popnoodles Hay más problemas que eso, pero sería demasiado largo explicarlos todos aquí. Por lo tanto, los lectores deberían echar un vistazo al post womble vinculado. Sin embargo, un resumen aquí sería bueno, de lo contrario esta información se pierde un poco ...
Rauni Lillemets

78

Use el attrmétodo en su búsqueda. Puede cambiar cualquier atributo con un nuevo valor.

$("a.mylink").attr("href", "http://cupcream.com");

2
Esto funcionó para mí si configuro class = "mylink" en la etiqueta a. Solo quería aclarar que en caso de que alguien intente configurar name = "mylink" de forma similar a la respuesta anterior y espere que funcione.
cpuguru

40

Dependiendo de si desea cambiar todos los enlaces idénticos a otra cosa o si desea controlar solo los que están en una sección determinada de la página o cada uno individualmente, puede hacer uno de estos.

Cambie todos los enlaces a Google para que apunten a Google Maps:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Para cambiar los enlaces en una sección determinada, agregue la clase div del contenedor al selector. Este ejemplo cambiará el enlace de Google en el contenido, pero no en el pie de página:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Para cambiar enlaces individuales independientemente de dónde se encuentren en el documento, agregue una identificación al enlace y luego agregue esa identificación al selector. Este ejemplo cambiará el segundo enlace de Google en el contenido, pero no el primero o el del pie de página:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

36

A pesar de que el OP solicitó explícitamente una respuesta jQuery, no necesita usar jQuery para todo en estos días.

Algunos métodos sin jQuery:

  • Si desea cambiar el hrefvalor de todos los <a> elementos, selecciónelos todos y luego repita la lista de nodos : (ejemplo)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
  • Si desea cambiar el hrefvalor de todos los <a>elementos que realmente tienen un hrefatributo, selecciónelos agregando el [href]selector de atributos ( a[href]): (ejemplo)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
  • Si desea cambiar el hrefvalor de los <a>elementos que contienen un valor específico, por ejemplo google.com, use el selector de atributos a[href*="google.com"]: (ejemplo)

    var anchors = document.querySelectorAll('a[href*="google.com"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });

    Del mismo modo, también puede usar los otros selectores de atributos . Por ejemplo:

    • a[href$=".png"]podría usarse para seleccionar <a>elementos cuyo hrefvalor termine con .png.

    • a[href^="https://"]podría usarse para seleccionar <a>elementos con hrefvalores con el prefijohttps:// .

  • Si desea cambiar el hrefvalor de los <a>elementos que satisfacen múltiples condiciones: (ejemplo)

    var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });

..no hay necesidad de expresiones regulares, en la mayoría de los casos.


9

Este fragmento se invoca cuando se hace clic en un enlace de la clase 'menu_link', y muestra el texto y la URL del enlace. El retorno falso evita que se siga el enlace.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

3
No soy demasiado pedante con respecto al voto negativo, pero si no va a decir por qué está votando a favor, no se logra nada y no debe molestarse.
crafter

2
Se votó negativamente porque su fragmento y su respuesta no responden a la pregunta original, y realmente no proporcionan ninguna explicación de por qué la información obtenida utilizando el fragmento es útil.
David Millar

55
El voto negativo es pedante. Es posible que él / ella no haya puesto tanto esfuerzo en su respuesta como lo hicieron otros usuarios, pero de hecho proporcionó un código para resolver el problema. El OP solo necesitaría pensar un poco más además de copiar y pegar una solución personalizada.
Ulises

8

La forma simple de hacerlo es:

Función Attr (desde jQuery versión 1.0)

$("a").attr("href", "https://stackoverflow.com/") 

o

Función prop (desde jQuery versión 1.6)

$("a").prop("href", "https://stackoverflow.com/")

Además, la ventaja de la forma anterior es que si el selector selecciona un solo ancla, actualizará ese ancla solamente y si el selector devuelve un grupo de ancla, actualizará el grupo específico a través de una sola declaración.

Ahora, hay muchas maneras de identificar el ancla o grupo de anclajes exactos:

Muy simples:

  1. Seleccione el ancla a través del nombre de la etiqueta: $("a")
  2. Seleccionar ancla a través del índice: $("a:eq(0)")
  3. Seleccione el ancla para clases específicas (como en esta clase solo las anclas con clase active):$("a.active")
  4. Selección de anclas con ID específica (aquí en profileLink ID de ejemplo ):$("a#proileLink")
  5. Selección del primer ancla href: $("a:first")

Más útiles:

  1. Selección de todos los elementos con atributo href: $("[href]")
  2. Selección de todos los anclajes con href específico: $("a[href='www.stackoverflow.com']")
  3. Seleccionar todos los anclajes que no tienen href específicos: $("a[href!='www.stackoverflow.com']")
  4. Selección de todos los anclajes con href que contiene URL específica: $("a[href*='www.stackoverflow.com']")
  5. Selección de todos los anclajes con href que comienzan con una URL específica: $("a[href^='www.stackoverflow.com']")
  6. Selección de todos los anclajes con href que terminan con una URL específica: $("a[href$='www.stackoverflow.com']")

Ahora, si desea modificar URL específicas, puede hacerlo como:

Por ejemplo, si desea agregar un sitio web proxy para todas las URL que van a google.com, puede implementarlo de la siguiente manera:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });


3
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

2

Cambiar el HREF de la imagen del logotipo de Wordpress Avada Theme

Si instala el complemento PHP ShortCode Exec, puede crear este Shortcode que llamé myjavascript

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Ahora puede ir a Apariencia / Widgets y elegir una de las áreas de widgets de pie de página y usar un widget de texto para agregar el siguiente shortcode

[myjavascript]

El selector puede cambiar según la imagen que esté usando y si está lista para la retina, pero siempre puede resolverlo utilizando herramientas de desarrolladores.


2

href en un atributo, para que pueda cambiarlo usando JavaScript puro, pero si ya tiene jQuery inyectado en su página, no se preocupe, lo mostraré en ambos sentidos:

Imagina que tienes esto a hrefcontinuación:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

Y te gusta cambiarlo el enlace ...

Usando JavaScript puro sin ninguna biblioteca puedes hacer:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

Pero también en jQuery puedes hacer:

$("#ali").attr("href", "https://stackoverflow.com");

o

$("#ali").prop("href", "https://stackoverflow.com");

En este caso, si ya ha inyectado jQuery, probablemente jQuery one se vea más corto y más cruzado ... pero aparte de eso, voy con el JS...

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.