Como você pode mudar o href para um hyperlink usando jQuery?
Usando
$("a").attr("href", "http://www.google.com/")
irá modificar o href de todos os hyperlinks para apontar para o Google. Mas você provavelmente quer um seletor um pouco mais refinado. Por exemplo, se você tiver uma mistura de fonte de link (hyperlink) e tags de âncora de link (também conhecida como "âncora"):
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...então você provavelmente não quer acidentalmente adicionar-lhes atributos href
. Por segurança, então, podemos especificar que nosso seletor só combinará <a>
tags com um atributo href
existente:
$("a[href]") //...
Claro, você provavelmente terá algo mais interessante em mente. Se você quiser combinar uma âncora com um href
específico existente, você pode usar algo como isto:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Isto vai encontrar links onde o href' corresponde exactamente à string
http://www.google.com/'. Uma tarefa mais envolvida pode ser a correspondência, então atualizando apenas parte do `href':
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
A primeira parte seleciona apenas os links onde o href starts com https://stackoverflow.com
. Depois, é definida uma função que utiliza uma simples expressão regular para substituir esta parte da URL por uma nova. Note a flexibilidade que isto lhe dá - qualquer tipo de modificação no link poderia ser feita aqui.
Dependendo se você quer mudar todos os links idênticos para outra coisa ou se você quer controlar apenas os que estão em uma determinada seção da página ou cada um individualmente, você poderia fazer um destes.
Altere todos os links para o Google para que apontem para o Google Maps:
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Para alterar os links em uma determinada seção, adicione a classe do container div ao seletor. Este exemplo irá alterar 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 ligações individuais independentemente de onde elas se encontram no documento, adicione um id à ligação e depois adicione esse id ao selector. Este exemplo irá alterar o segundo link do Google no conteúdo, mas não o primeiro ou o que se encontra no rodapé do documento:
<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/');