So ändern Sie die href für einen hyperlink using jQuery

Question

Wie können Sie die href für einen hyperlink using jQuery?

Answer 1

Mit

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

das href aller Hyperlinks ändern, um Google zu verweisen. Sie wollen wahrscheinlich eine etwas raffiniertere obwohl Selektor. Zum Beispiel, wenn Sie eine Mischung aus Verknüpfungsquelle haben (Hyperlink) und Link-Ziel (auch bekannt als „Anker“) Anker-Tags:

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

... Dann haben Sie wahrscheinlich nicht wollen, versehentlich hinzufügen href ihnen zuschreibt. Aus Sicherheitsgründen können dann angeben, dass wir unsere Wähler nur <a> Tags mit einem vorhandenen href Attribute übereinstimmen:

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

Natürlich, werden Sie wahrscheinlich etwas Interessanteres im Sinn haben. Wenn Sie einen Anker mit einem bestimmten vorhandenen href übereinstimmen soll, könnten Sie etwas wie folgt verwenden:

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

Dies wird Links finden, wo die href genau die Zeichenfolge http://www.google.com/ übereinstimmt. Eine beteiligte Aufgabe passend sein könnte, dann nur einen Teil der href Aktualisierung:

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

Der erste Teil wählt nur Links, wo die href startet mit http://stackoverflow.com. Dann wird eine Funktion definiert, die mit einem einfachen regulären Ausdruck verwendet diesen Teil der URL durch einen neuen zu ersetzen. Beachten Sie die Flexibilität, das gibt Ihnen -. Jede Art von Modifikation des Link hier getan werden könnte

Answer 2

Mit jQuery 1.6 und höher sollten Sie verwenden:

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

Der Unterschied zwischen prop und attr ist, dass attr das HTML-Attribut packt während prop die DOM-Eigenschaft greift.

Sie können mehr Informationen in diesem Beitrag finden: .prop () vs .attr ()

Answer 3

Mit der attr Methode auf Nachschlag. Sie können jedes Attribut mit einem neuen Wert wechseln aus.

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

Answer 4

Je nachdem, ob Sie sonst alle identischen Links zu etwas ändern oder einstellen wollen, nur die, die in einem bestimmten Abschnitt der Seite oder jeder einzeln, Sie eins von diesen tun könnte.

Ändern Sie alle Links zu Google, so dass sie auf Google Maps zeigen:

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

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

Um Links in einem bestimmten Abschnitt zu ändern, fügen die Klasse des div-Container an die Wähler. In diesem Beispiel wird den Google-Link in dem Inhalt ändern, aber nicht in der Fußzeile:

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

Um einzelne Links zu ändern, unabhängig davon, wo sie in dem Dokument fallen, fügen Sie eine ID auf den Link und dann diese ID zu dem Selektor hinzuzufügen. In diesem Beispiel wird den zweiten Google-Link in dem Inhalt ändern, aber nicht die erste oder die in der Fußzeile:

<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

_{Auch wenn die OP explizit für eine jQuery Antwort gefragt, brauchen Sie nicht in diesen Tagen jQuery für alles zu verwenden.}

Einige Methoden ohne jQuery:

• Wenn Sie den href Wert von alle <a> Elemente zu ändern, wählen sie alle und dann durch die nodelist : (Beispiel)

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

• Wenn Sie den href Wert aller <a> Elemente ändern, die eigentlich ein href Attribut haben, markieren Sie sie, indem Sie den [href] Attributselektor Hinzufügen (a[href]): (Beispiel)

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

• Wenn Sie den href Wert von <a> Elementen ändern mögen, dass enthalten ein bestimmte Wert, zum Beispiel google.com, den Attributselektor a[href*="google.com"] verwenden: (Beispiel)

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

  Ebenso können Sie auch die anderen Attributselektoren . Zum Beispiel:

  • a[href$=".png"] verwendet werden könnte <a> Elemente, deren href Wert endet mit .png.

  wählen

  • a[href^="https://"] verwendet werden könnten <a> Elemente mit href Werte auszuwählen, die Präfix mit https://.

• Wenn Sie den href Wert von <a> Elemente ändern, die mehrere Bedingungen erfüllen: (Beispiel)

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

.. keine Notwendigkeit für regex, in die meisten Fälle.

Answer 6

Dieser Code-Schnipsel ruft, wenn eine Verbindung der Klasse ‚menu_link‘ geklickt wird, und zeigt den Text und die URL des Links. Die return false verhindert, dass die Verbindung von gefolgt wird.

<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

Stop jQuery verwenden, nur um von ihm! Dies ist so einfach mit JavaScript nur.

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

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

Answer 8

Der einfache Weg, dies zu tun ist:

Attr Funktion (seit jQuery Version 1.0)

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

oder

Prop Funktion (seit jQuery Version 1.6)

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

Auch ist der Vorteil von oben Art und Weise, dass, wenn Wähler einen einzigen Anker wählen, wird es diesen Anker nur aktualisieren und wenn Wähler eine Gruppe von Ankerzurückkehrt, wird es die spezifische Gruppe durch eine Anweisung nur aktualisieren.

Nun, es gibt viele Möglichkeiten, genaue Anker oder eine Gruppe von Ankern zu identifizieren:

Ganz einfach Ones:

1. Wählen Sie Anker durch Tag-Namen: $("a")
2. Wählen Anker durch Index: $("a:eq(0)")
3. Wählen Anker für bestimmte Klassen (wie in dieser Klasse nur Anker mit Klasse active): $("a.active")
4. Auswählen Anker mit spezifischer ID (hier in Beispiel profileLink ID): $("a#proileLink")
5. Auswählen des ersten Anker href: $("a:first")

Mehr Nützlichen:

6. Auswahl aller Elemente mit Attribut href: $("[href]")
7. Auswahl aller Anker mit spezifischen href: $("a[href='www.stackoverflow.com']")
8. Auswahl aller Anker nicht mit spezifischen href: $("a[href!='www.stackoverflow.com']")
9. Auswahl aller Anker mit href mit spezifischer URL: $("a[href*='www.stackoverflow.com']")
10. Auswahl aller Anker mit href mit spezifischer URL Start: $("a[href^='www.stackoverflow.com']")
11. Auswahl aller Anker mit href Ende mit spezifischer URL: $("a[href$='www.stackoverflow.com']")

Nun, wenn Sie bestimmte URLs ändern möchten, können Sie das tun, wie:

Zum Beispiel, wenn Sie Proxy-Website für alle URLs gehen zu google.com hinzufügen möchten, können Sie es wie folgt implementieren:

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

Ändern Sie das HREF-das Wordpress Avada Theme-Logo-Bild

Wenn Sie installieren Sie den ShortCode Exec PHP plugin Sie können diese Kurzwahlnummer, die ich rief myjavascript

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

Gehen Sie jetzt auf Appearance/Widgets und wählen Sie einen der Fußzeile widget-Bereiche und verwenden Sie einen text-widget fügen Sie den folgenden shortcode

[myjavascript]

Der Selektor kann sich ändern je nach Bild, was Ihr mit, und wenn es ist retina bereit, aber Sie können immer herausfinden, indem Entwickler-tools.

Answer 11

href in einem Attribute, so dass Sie es mit reinem JavaScript ändern können, aber wenn Sie bereits in Ihrer Seite jQuery injiziert haben, keine Sorge, ich es in beiden Richtungen zeigen:

Stellen Sie sich vor Sie haben diese href unter:

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

Und Sie wollen es den Link ändern ...

Mit reiner JavaScript ohne Bibliothek können Sie tun:

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

Aber auch in jQuery Sie tun können:

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

oder

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

In diesem Fall, wenn Sie bereits jQuery injiziert, wahrscheinlich aussehen jQuery eine kürzere und Cross-Browser ... aber anders als das ich mit dem JS gehen ein ...