Como alterar o href de um hiperlink usando jQuery

Question

Como você pode alterar o href de um hiperlink usando jQuery?

Answer 1

Usando

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

irá modificar a href de todos os hiperlinks para apontar para o Google. Você provavelmente quer um seletor de um pouco mais refinado embora. Por exemplo, se você tem uma mistura de origem do link (hyperlink) e destino do link (conhecidos como "âncora") marcas de âncora:

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

... Então você provavelmente não deseja adicionar acidentalmente atributos href para eles. Por razões de segurança, em seguida, podemos especificar que o nosso selector só irá coincidir com etiquetas <a> com um atributo href existente:

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

Claro, você provavelmente vai ter algo mais interessante em mente. Se você quiser combinar uma âncora com um href específica existente, você pode usar algo como isto:

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

Esta encontrará links onde o href corresponde exatamente a http://www.google.com/ string. A tarefa mais envolvido pode ser correspondência, em seguida, atualizar apenas uma parte da href:

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

As primeiras seleciona parte vincula apenas quando a href inicia com http://stackoverflow.com. Em seguida, uma função é definida que usa uma expressão regular para substituir esta parte da URL com um novo. Observe a flexibilidade este dá-lhe -. Qualquer tipo de modificação para a ligação poderia ser feito aqui

Answer 2

Com jQuery 1.6 e acima, você deve usar:

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

A diferença entre prop e attr é que attr agarra o atributo HTML enquanto prop agarra a propriedade DOM.

Você pode encontrar mais detalhes neste post: .prop () vs .attr ()

Answer 3

Use o método attr em sua pesquisa. Você pode mudar a qualquer atributo com um novo valor.

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

Answer 4

Dependendo se você quer mudar todas as ligações idênticas para outra coisa ou você quer controle sobre apenas aqueles em uma determinada seção da página ou cada um individualmente, você poderia fazer uma dessas.

Alterar todos os links para o Google para que eles apontam para Google Maps:

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

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

Para alterar links em uma determinada seção, adicione a classe do div recipiente para o selector. Este exemplo vai mudar o link do Google no conteúdo, mas não no rodapé:

<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 alterar links individuais, independentemente de onde eles caem no documento, adicionar um id para o link e, em seguida, acrescentar que id para o seletor. Este exemplo, irá mudar o segundo link Google no conteúdo, mas não o primeiro ou o único no rodapé:

<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

_{Mesmo que o OP pediu explicitamente uma resposta jQuery, você não precisa usar jQuery para tudo hoje em dia.}

A alguns métodos sem jQuery:

• Se você quiser alterar o valor href de todos os elementos <a>, selecione todos eles e, em seguida, percorrer a nodelist : (exemplo)

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

• Se você quiser alterar o valor href de todos os elementos <a> que realmente têm um atributo href, selecioná-los, adicionando o seletor de atributo [href] (a[href]): (exemplo)

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

• Se você quiser alterar o valor href de elementos <a> que conter um valor específico, por exemplo google.com, utilize o a[href*="google.com"] seletor de atributo: (exemplo)

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

  Da mesma forma, você também pode usar o outro . Por exemplo:

  • a[href$=".png"] poderia ser usado para selecionar elementos <a> cujos href valor extremidades com .png.

  • a[href^="https://"] poderia ser usado para selecionar elementos <a> com valores href que são prefixado com https://.

• Se você quiser alterar o valor href de elementos <a> que satisfazer várias condições: (exemplo)

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

.. há necessidade de regex, no mais casos.

Answer 6

Este trecho invoca quando um link da classe 'menu_link' é clicado, e mostra o texto e url do link. O falsos retorno impede que o link seja seguido.

<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

Pare de usar jQuery apenas para o bem dela! Isto é tão simples com JavaScript somente.

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

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

Answer 8

A maneira mais simples de fazer isso é:

Attr função (desde a versão jQuery 1.0)

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

ou

Prop função (desde a versão jQuery 1.6)

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

Além disso, a vantagem de muito acima é que se seleciona seletor de uma única âncora, ele irá atualizar apenas essa âncora e se seletor retorna um grupo de âncora, ele irá atualizar o grupo específico através de uma única declaração.

Agora, existem muitas maneiras de identificar âncora exata ou grupo de âncoras:

Ones bastante simples:

1. Selecionar âncora através nome tag: $("a")
2. Selecionar âncora através índice: $("a:eq(0)")
3. Selecione âncora para classes específicas (como nesta classe apenas âncoras com active classe): $("a.active")
4. A seleção âncoras com ID específico (aqui no exemplo profileLink ID): $("a#proileLink")
5. Selecionar primeiro href âncora: $("a:first")

os mais úteis:

6. A seleção de todos os elementos com atributo href: $("[href]")
7. Seleção de todas as âncoras com href específica: $("a[href='www.stackoverflow.com']")
8. Seleção de todas as âncoras não tendo href específica: $("a[href!='www.stackoverflow.com']")
9. Seleção de todas as âncoras com href contendo URL específica: $("a[href*='www.stackoverflow.com']")
10. Seleção de todas as âncoras com href começando com URL específica: $("a[href^='www.stackoverflow.com']")
11. Seleção de todas as âncoras com href terminando com URL específica: $("a[href$='www.stackoverflow.com']")

Agora, se você quiser alterar URLs específicas, você pode fazer isso:

Por exemplo, se você deseja adicionar o site proxy para todos os URLs indo para google.com, você pode implementá-lo da seguinte forma:

$("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

Alterar o HREF da imagem do logotipo do tema Wordpress Avada

Se você instalar o plugin ShortCode Exec PHP você pode criar este Shortcode que chamei de myjavascript

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

Agora você pode ir para Aparência/Widgets e escolher uma das áreas do widget de rodapé e usar um widget de texto para adicionar o seguinte código de acesso

[myjavascript]

O seletor pode mudar dependendo da imagem que você está usando e se está pronta para retina, mas você sempre pode descobrir isso usando ferramentas de desenvolvedor.

Answer 11

href em um atributo, assim você pode alterá-lo usando JavaScript puro, mas se você já tem jQuery injetada em sua página, não se preocupe, eu vou mostrá-lo de duas formas:

Imagine que você tem este href abaixo:

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

E você gosta de mudar o link ...

Usando puro JavaScript sem qualquer biblioteca que você pode fazer:

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

Mas também na jQuery você pode fazer:

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

ou

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

Neste caso, se você já tem jQuery injetado, provavelmente jQuery um olhar mais curto e cross-browser ... mas diferente do que eu ir com o JS ...