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


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


1087
2017-10-07 18:17


origen


Respuestas:


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

... Modificará el href de todos los hipervínculos para señalar a Google. Sin embargo, probablemente quieras un selector algo más refinado. Por ejemplo, si tiene una combinación de etiquetas de anclaje de origen de enlace (hipervínculo) y objetivo de enlace (a.k.a. "ancla"):

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

... Entonces probablemente no quieras agregar accidentalmente href atributos para ellos. Para mayor seguridad, podemos especificar que nuestro selector solo coincidirá <a> etiquetas con un existente href atributo:

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

Por supuesto, probablemente tengas algo más interesante en mente. Si desea unir un anclaje con un existente específico href, puedes usar algo como esto:

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

Esto encontrará enlaces donde href coincide exactamente con la cadena http://www.google.com/. Una tarea más complicada puede coincidir y luego actualizar solo una parte del href:

$("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 empieza con http://stackoverflow.com. Luego, se define una función que usa una expresión regular simple para reemplazar esta parte de la URL por una nueva. Tenga en cuenta la flexibilidad que esto le da, cualquier tipo de modificación del enlace se puede hacer aquí.


1606
2017-10-07 18:19



Con jQuery 1.6 y superior deberías usar:

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

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

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


251
2018-06-14 18:28



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

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

69
2017-10-07 18:20



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 los 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 ni el que está en el 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/');

37
2017-10-17 17:58



Aunque OP pidió explícitamente una respuesta jQuery, no necesita usar jQuery para todo en estos días.

Algunos métodos sin jQuery:

  • Si quieres cambiar el href valor de todas  <a> elementos, selecciónalos todos y luego itere a través del lista de nodos: (ejemplo)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://stackoverflow.com";
    });
    
  • Si quieres cambiar el href valor de todos <a> elementos que en realidad tienen un href atributo, 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 quieres cambiar el href valor de <a> elementos que Contiene un valor específico, por ejemplo google.com, usa 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 el otro selectores de atributos. Por ejemplo:

    • a[href$=".png"]podría ser utilizado para seleccionar <a> elementos cuya href el valor termina con .png.

    • a[href^="https://"]podría ser utilizado para seleccionar <a> elementos con href valores que son prefijado con https://.

  • Si quieres cambiar el href valor de <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 necesita regex, en más casos.


29
2018-01-19 00:51



Este fragmento 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 impide 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;
});

8
2017-12-10 06:25



¡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/


6
2017-09-01 16:17



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

2
2017-07-13 11:40



Cambiar el HREF de Wordpress Avada Theme Logo Image

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

[myjavascript]

El selector puede cambiar dependiendo de la imagen que use y si está listo para la retina, pero siempre puede resolverlo utilizando las herramientas de desarrollo.


1
2018-03-24 17:47



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 anclaje, actualizará ese anclaje únicamente y si el selector devuelve un grupo de anclaje, actualizará el grupo específico a través de una sola instrucción.

Ahora, hay muchas formas de identificar el anclaje exacto o el grupo de anclajes:

Muy simples:

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

Más útiles:

  1. Seleccionar todos los elementos con atributo href: $("[href]")
  2. Seleccionar todos los anclajes con href específico: $("a[href='www.stackoverflow.com']")
  3. Seleccionar todos los anclajes que no tienen href específico: $("a[href!='www.stackoverflow.com']")
  4. Seleccionar todos los anclajes con href que contengan la URL específica: $("a[href*='www.stackoverflow.com']")
  5. Seleccionar todos los anclajes con href a partir de una URL específica: $("a[href^='www.stackoverflow.com']")
  6. Seleccionar todos los anclajes con href que terminan en 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);
    });
   });

1
2018-03-30 04:51