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

hipervinculos en html ejemplos

Question

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

Answer 1

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

Si instala el complemento PHP de 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:[phone]");
});
</script>

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

[myjavascript]

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

Answer 2

Con jQuery 1.6 y superior debes usar:

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

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

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

Answer 3

Deja de usar jQuery solo por el bien de eso! Esto es tan simple con JavaScript solamente.

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

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

Answer 4

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

Cambia 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 dada, 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 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/'');

Answer 5

Este fragmento de código 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 6

La forma más sencilla de hacerlo es:

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

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

o

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

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

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

Ahora, hay muchas maneras de identificar el ancla exacta o el grupo de anclas:

Bastantes simples:

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

Más útiles:

6. Seleccionando todos los elementos con el atributo href: $("[href]")
7. Seleccionando todos los anclajes con href específico: $("a[href=''www..com'']")
8. Seleccionando todos los anclajes que no tengan href: $("a[href!=''www..com'']")
9. Seleccionando todos los anclajes con href que contengan URL específica: $("a[href*=''www..com'']")
10. Seleccionando todos los anclajes con href comenzando con una URL específica: $("a[href^=''www..com'']")
11. Seleccionando todos los anclajes con href que terminen con una URL específica: $("a[href$=''www..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 7

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

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

Answer 8

Utilizando

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

modificará el href de todos los hipervínculos para apuntar a Google. Aunque 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 destino (también conocido como "ancla"):

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

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

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

Por supuesto, probablemente tengas algo más interesante en mente. Si desea hacer coincidir un ancla con un href existente específico, puede 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 podría coincidir, y luego actualizar solo una parte del href :

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

La primera parte selecciona solo los enlaces donde el href comienza con http://.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: aquí se puede hacer cualquier tipo de modificación al enlace.

Answer 9

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

Algunos métodos sin jQuery:

• Si desea cambiar el valor href de todos los elementos <a> , selecciónelos todos y luego itere a través de la lista de nodelist : (example)

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

• Si desea cambiar el valor href de todos los elementos <a> que realmente tienen un atributo href , selecciónelos agregando el selector de atributo [href] ( a[href] ): (example)

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

• Si desea cambiar el valor href de los elementos <a> que contienen un valor específico, por ejemplo, google.com , use el selector de atributo a[href*="google.com"] : (example)

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

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

  • a[href$=".png"] podría usar a[href$=".png"] para seleccionar <a> elementos cuyo valor href termina con .png .

  • a[href^="https://"] podría usar a a[href^="https://"] para seleccionar <a> elementos con valores href con el prefijo https:// .

• Si desea cambiar el valor href de los elementos <a> que satisfacen varias condiciones: (example)

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

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

Answer 10

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