Cómo cambiar el href de un hipervínculo con jQuery

Question

¿Cómo se puede cambiar el atributo href de un hipervínculo con jQuery?

Answer 1

Uso

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

modificará la href de todos los hipervínculos para señalar a Google. Sin embargo, es probable que desee un selector algo más refinado. Por ejemplo, si tiene una combinación de fuente de enlace (hipervínculo) y destino de enlace (a.k.a. & Quot; anchor & Quot;) etiquetas de anclaje:

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

... Entonces probablemente no desee agregarles accidentalmente href atributos. Por seguridad, entonces, podemos especificar que nuestro selector solo coincida con <a> etiquetas con un atributo http://www.google.com/ existente:

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

Por supuesto, probablemente tengas algo más interesante en mente. Si desea hacer coincidir un ancla con un http://stackoverflow.com específico existente, puede usar algo como esto:

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

Esto encontrará enlaces donde <=> coincide exactamente con la cadena <=>. Una tarea más complicada podría ser la coincidencia, luego actualizar solo una parte de <=>:

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

La primera parte selecciona solo enlaces donde href comienza con <=>. 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í.

Answer 2

Con jQuery 1.6 y superior debes usar:

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

La diferencia entre prop y attr es eso attr toma el atributo HTML mientras que prop toma la propiedad DOM.

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

Answer 3

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

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

Answer 4

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 del contenedor div 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/');

Answer 5

_{Aunque el OP solicitó explícitamente una respuesta de jQuery, no necesita usar jQuery para todo en estos días.}

Algunos métodos sin jQuery:

• Si desea cambiar el valor href de all <a> elementos, selecciónelos todos y luego repita los nodelist : ( ejemplo)

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

• Si desea cambiar el valor [href] de todos los elementos a[href] que realmente tienen un atributo google.com, selecciónelos agregando el selector de atributos a[href*="google.com"] (a[href$=".png"]): (ejemplo)

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

• Si desea cambiar el valor .png de a[href^="https://"] elementos que contienen un valor específico, por ejemplo https://, use el selector de atributos <=>: (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:

  • <=> podría usarse para seleccionar elementos <=> cuyo valor <=> termina con <=>.

  • <=> podría usarse para seleccionar <=> elementos con <=> valores que tienen prefijo con <=>.

• Si desea cambiar el valor <=> de <=> 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 necesita regex, en la mayoría de casos.

Answer 6

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;
});

Answer 7

¡Deja de usar jQuery por el simple hecho de hacerlo! Esto es tan simple solo con JavaScript.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

Answer 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 de apoyo (desde jQuery versión 1.6)

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

Además, la ventaja de la manera 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. Seleccionar ancla para clases específicas (como en esta clase solo las anclas con clase active): $("a.active")
4. Seleccionar anclas con ID específica (aquí en el ejemplo profileLink ID): $("a#proileLink")
5. Seleccionando el primer href de anclaje: $("a:first")

Más útiles:

6. Seleccionar todos los elementos con atributo href: $("[href]")
7. Seleccionar todos los anclajes con href específico: $("a[href='www.stackoverflow.com']")
8. Seleccionar todos los anclajes que no tienen href específicos: $("a[href!='www.stackoverflow.com']")
9. Seleccionar todos los anclajes con href que contenga URL específica: $("a[href*='www.stackoverflow.com']")
10. Seleccionar todos los anclajes con href comenzando con una URL específica: $("a[href^='www.stackoverflow.com']")
11. Seleccionar 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);
    });
   });

Answer 9

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

Answer 10

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

Si instala el complemento PHP ShortCode Exec, puede crear este código corto al 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 del pie de página y usar un widget de texto para agregar el siguiente código corto

[myjavascript]

El selector puede cambiar dependiendo de la imagen que estés usando y si está lista para retina, pero siempre puedes averiguarlo utilizando las herramientas de desarrollo.

Answer 11

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é de ambas maneras:

Imagine que tiene esto JS a continuación:

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

Y te gusta cambiar el enlace ...

Uso de JavaScript puro sin ninguna biblioteca que pueda 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 uno se vea más corto y más cruzado ... pero aparte de eso, voy con el <=> uno ...