Come modificare l'indirizzo di un collegamento ipertestuale utilizzando jQuery

Question

Come si può cambiare la href di un collegamento ipertestuale utilizzando jQuery?

Answer 1

con

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

modificherà l'href di tutti i collegamenti ipertestuali per puntare a Google. Probabilmente vuoi un selettore un po 'più raffinato. Ad esempio, se si dispone di un mix di origine link (collegamento ipertestuale) e target collegamento (a.k.a. & Quot; anchor & Quot;) tag di ancoraggio:

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

... Quindi probabilmente non vorrai aggiungere accidentalmente href attributi ad essi. Per sicurezza, quindi, possiamo specificare che il nostro selettore corrisponderà solo a <a> tag con un attributo http://www.google.com/ esistente:

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

Naturalmente, probabilmente avrai in mente qualcosa di più interessante. Se si desidera abbinare un'ancora a uno specifico http://stackoverflow.com esistente, è possibile utilizzare qualcosa del genere:

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

Questo troverà collegamenti in cui <=> corrisponde esattamente alla stringa <=>. Un'attività più coinvolta potrebbe corrispondere, quindi aggiornare solo una parte di <=>:

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

La prima parte seleziona solo i collegamenti in cui l'href inizia con <=>. Quindi, viene definita una funzione che utilizza una semplice espressione regolare per sostituire questa parte dell'URL con una nuova. Nota la flessibilità che ti offre: qualsiasi tipo di modifica al link potrebbe essere fatta qui.

Answer 2

Con jQuery 1.6 e versioni successive dovresti usare:

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

La differenza tra prop e attr è che <=> prende l'attributo HTML mentre <=> prende la proprietà DOM.

Puoi trovare maggiori dettagli in questo post: .prop () vs .attr ()

Answer 3

Utilizza il metodo attr nella tua ricerca. Puoi cambiare qualsiasi attributo con un nuovo valore.

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

Answer 4

A seconda che tu voglia cambiare tutti i collegamenti identici in qualcos'altro o vuoi controllare solo quelli in una data sezione della pagina o ognuno individualmente, potresti fare uno di questi.

Cambia tutti i link in Google in modo che puntino a Google Maps:

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

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

Per modificare i collegamenti in una determinata sezione, aggiungere la classe div del contenitore al selettore. Questo esempio cambierà il link di Google nei contenuti, ma non nel piè di pagina:

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

Per modificare i singoli collegamenti indipendentemente da dove rientrano nel documento, aggiungere un ID al collegamento e quindi aggiungere quell'ID al selettore. Questo esempio cambierà il secondo link di Google nel contenuto, ma non il primo o quello nel piè di pagina:

<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

_{Anche se l'OP ha chiesto esplicitamente una risposta jQuery, al giorno d'oggi non è necessario utilizzare jQuery per tutto.}

Alcuni metodi senza jQuery:

• Se vuoi cambiare il href valore di Tutto <a> elementi, selezionarli tutti e quindi scorrere il file listanodi: (esempio)

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

• Se vuoi cambiare il href valore di tutti <a> elementi che in realtà hanno un href attributo, selezionali aggiungendo l'attributo [href] selettore di attributi (a[href]): (esempio)

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

• Se vuoi cambiare il href valore di <a> elementi che contenere un valore specifico, ad esempio google.com, utilizzare il selettore degli attributi a[href*="google.com"]: (esempio)

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

  Allo stesso modo, puoi anche usare l'altro selettori di attributo.Ad esempio:

  • a[href$=".png"] potrebbe essere usato per selezionare <a> elementi di cui href il valore termina con .png.

  • a[href^="https://"] potrebbe essere usato per selezionare <a> elementi con href valori che sono prefissato con https://.

• Se vuoi cambiare il href valore di <a> elementi che soddisfano molteplici condizioni: (esempio)

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

..non c'è bisogno di regex, in maggior parte casi.

Answer 6

Questo frammento viene richiamato quando si fa clic su un collegamento della classe "menu_link" e mostra il testo e l'URL del collegamento. Il ritorno false impedisce che il collegamento venga seguito.

<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

Smetti di usare jQuery solo per il gusto di farlo! Questo è così semplice solo con JavaScript.

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

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

Answer 8

Il modo semplice per farlo è:

Funzione Attr (dalla versione 1.0 di jQuery)

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

o

Funzione prop (dalla versione 1.6 di jQuery)

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

Inoltre, il vantaggio di cui sopra è che se il selettore seleziona un singolo ancoraggio, aggiornerà solo quell'ancoraggio e se il selettore restituisce un gruppo di ancoraggi, aggiornerà il gruppo specifico attraverso una sola istruzione.

Ora, ci sono molti modi per identificare l'ancora esatta o il gruppo di ancore:

Molto semplici:

1. Seleziona l'ancoraggio tramite il nome del tag: $("a")
2. Seleziona ancora tramite indice: $("a:eq(0)")
3. Seleziona ancora per classi specifiche (come in questa classe solo ancore con classe active): $("a.active")
4. Selezione di ancore con ID specifico (qui nell'esempio profileLink ID): $("a#proileLink")
5. Selezione del primo href di ancoraggio: $("a:first")

Altri più utili:

6. Selezione di tutti gli elementi con attributo href: $("[href]")
7. Selezione di tutte le ancore con href specifico: $("a[href='www.stackoverflow.com']")
8. Selezione di tutte le ancore che non hanno href specifico: $("a[href!='www.stackoverflow.com']")
9. Selezione di tutte le ancore con href contenente URL specifico: $("a[href*='www.stackoverflow.com']")
10. Selezione di tutte le ancore con href a partire da un URL specifico: $("a[href^='www.stackoverflow.com']")
11. Selezione di tutte le ancore con href che termina con URL specifico: $("a[href$='www.stackoverflow.com']")

Ora, se vuoi modificare URL specifici, puoi farlo come:

Ad esempio, se si desidera aggiungere un sito Web proxy per tutti gli URL che vanno su google.com, è possibile implementarlo come segue:

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

Modificare l'HREF del Wordpress Avada Tema l'Immagine del Logo

Se si installa il ShortCode Exec PHP plugin è possibile creare questo Shortcode che ho chiamato myjavascript

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

Ora puoi andare a Aspetto/Widget e scegliere una delle aree di widget piè di pagina e utilizzare un widget di testo per aggiungere il seguente codice

[myjavascript]

Il selettore può cambiare a seconda di ciò che l'immagine della vostra e, se è retina pronto, ma si può sempre capire utilizzando gli sviluppatori di strumenti.

Answer 11

href in un attributo, quindi puoi cambiarlo usando JavaScript puro, ma se hai già iniettato jQuery nella tua pagina, non preoccuparti, lo mostrerò in entrambi i modi:

Immagina di avere questo JS di seguito:

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

E ti piace cambiarlo il link ...

Utilizzando JavaScript puro senza alcuna libreria che puoi fare:

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

Ma anche in jQuery puoi fare:

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

o

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

In questo caso, se hai già iniettato jQuery, probabilmente jQuery sembra più corto e più cross-browser ... ma a parte quello vado con <=> uno ...