Wie können Sie die href für einen Hyperlink mit jQuery ändern?

Verwenden von

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

ändert die href aller Hyperlinks so, dass sie auf Google verweisen. Sie möchten wahrscheinlich einen etwas verfeinerten Selektor. Wenn Sie beispielsweise eine Mischung aus Anker-Tags für Linkquelle (Hyperlink) und Linkziel (auch als "Anker" bezeichnet) haben:

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

... Dann möchten Sie ihnen wahrscheinlich nicht versehentlich hrefAttribute hinzufügen . Aus Sicherheitsgründen können wir dann festlegen, dass unser Selektor nur übereinstimmt<a> Tags mit einem vorhandenen hrefAttribut abgleichen soll:

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

Natürlich haben Sie wahrscheinlich etwas Interessanteres im Sinn. Wenn Sie einen Anker mit einem bestimmten vorhandenen Anker abgleichen möchtenhref , können Sie Folgendes verwenden:

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

Hier finden Sie Links, bei denen hrefdie Zeichenfolge genau mit der Zeichenfolge übereinstimmt http://www.google.com/. Eine komplexere Aufgabe könnte darin bestehen, nur einen Teil der Aufgabe zu aktualisieren und dann zu aktualisierenhref :

$("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 beginnt mit http://stackoverflow.com. Anschließend wird eine Funktion definiert, die einen einfachen regulären Ausdruck verwendet, um diesen Teil der URL durch einen neuen zu ersetzen. Beachten Sie die Flexibilität, die Sie dadurch erhalten. Hier können Sie jede Art von Änderung am Link vornehmen.

Mit jQuery 1.6 und höher sollten Sie Folgendes verwenden:

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

Der Unterschied zwischen propund attrbesteht darin, dass attrdas HTML-Attribut während erfasst wirdprop erfasst die DOM-Eigenschaft erfasst wird.

Weitere Details finden Sie in diesem Beitrag: .prop () vs .attr ()

Verwenden Sie die attrMethode bei Ihrer Suche. Sie können jedes Attribut mit einem neuen Wert austauschen.

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

Abhängig davon, ob Sie alle identischen Links zu etwas anderem ändern möchten oder nur die in einem bestimmten Abschnitt der Seite oder jeweils einzeln steuern möchten, können Sie einen dieser Schritte ausführen.

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

<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 Sie die Klasse des Container-Div zum Selektor hinzu. In diesem Beispiel wird der Google-Link im Inhalt geändert, jedoch 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 das Dokument fallen, fügen Sie dem Link eine ID hinzu und fügen Sie diese ID dann dem Selektor hinzu. In diesem Beispiel wird der zweite Google-Link im Inhalt geändert, nicht jedoch der erste oder der 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/');

_{Obwohl das OP explizit nach einer jQuery-Antwort gefragt hat, müssen Sie jQuery heutzutage nicht für alles verwenden.}

Einige Methoden ohne jQuery:

• Wenn Sie den hrefWert aller <a> Elemente ändern möchten , wählen Sie sie alle aus und durchlaufen Sie dann die Knotenliste : (Beispiel)

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

• Wenn Sie den hrefWert aller <a>Elemente ändern möchten, die tatsächlich ein hrefAttribut haben, wählen Sie sie aus, indem Sie den [href]Attributselektor ( a[href]) hinzufügen : (Beispiel)

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

• Wenn Sie beispielsweise den hrefWert von <a>Elementen ändern möchten , die einen bestimmten Wert enthaltengoogle.com , verwenden Sie die Attributauswahl a[href*="google.com"]: (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 verwenden . Zum Beispiel:

  • a[href$=".png"]könnte verwendet werden, um <a>Elemente auszuwählen , deren hrefWert mit endet .png.

  • a[href^="https://"]werden könnte , auszuwählen , die verwendeten <a>Elemente mit hrefWerten , die sie voran mit https://.

• Wenn Sie den hrefWert von <a>Elementen ändern möchten , 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 den meisten Fällen.

Dieses Snippet wird aufgerufen, wenn auf einen Link der Klasse 'menu_link' geklickt wird, und zeigt den Text und die URL des Links an. Die Rückgabe false verhindert, dass dem Link 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;
});

Der einfache Weg dazu 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/")

Der oben beschriebene Vorteil besteht auch darin, dass, wenn der Selektor einen einzelnen Anker auswählt, nur dieser Anker aktualisiert wird und wenn der Selektor eine Gruppe von Ankern zurückgibt, die spezifische Gruppe nur über eine Anweisung aktualisiert wird.

Nun gibt es viele Möglichkeiten, den genauen Anker oder die Gruppe von Ankern zu identifizieren:

Ganz einfache:

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

Weitere nützliche:

6. Auswahl aller Elemente mit href-Attribut: $("[href]")
7. Auswahl aller Anker mit spezifischem href: $("a[href='www.stackoverflow.com']")
8. Auswahl aller Anker ohne spezifische href: $("a[href!='www.stackoverflow.com']")
9. Auswahl aller Anker mit href, die eine bestimmte URL enthalten: $("a[href*='www.stackoverflow.com']")
10. Auswahl aller Anker mit href beginnend mit einer bestimmten URL: $("a[href^='www.stackoverflow.com']")
11. Auswählen aller Anker mit href, die mit einer bestimmten URL enden: $("a[href$='www.stackoverflow.com']")

Wenn Sie nun bestimmte URLs ändern möchten, können Sie dies wie folgt tun:

Wenn Sie beispielsweise eine Proxy-Website für alle URLs zu google.com hinzufügen möchten, können Sie diese 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);
    });
   });

Stoppen Sie die Verwendung von jQuery nur deswegen! Dies ist nur mit JavaScript so einfach.

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

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

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

Ändern Sie die HREF des Wordpress Avada Theme Logo Image

Wenn Sie das ShortCode Exec PHP-Plugin installieren, können Sie diesen Shortcode erstellen, den ich myjavascript nannte

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

Sie können jetzt zu Darstellung / Widgets gehen und einen der Fußzeilen-Widget-Bereiche auswählen und mithilfe eines Text-Widgets den folgenden Shortcode hinzufügen

[myjavascript]

Die Auswahl kann sich ändern, je nachdem, welches Bild Sie verwenden und ob es für die Netzhaut bereit ist. Sie können es jedoch jederzeit mithilfe von Entwicklertools herausfinden.

href in einem Attribut, damit Sie es mit reinem JavaScript ändern können, aber wenn Sie bereits jQuery in Ihre Seite eingefügt haben, machen Sie sich keine Sorgen, ich werde es in beide Richtungen zeigen:

Stellen Sie sich vor, Sie haben hrefFolgendes:

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

Und Sie möchten den Link ändern ...

Mit reinem JavaScript ohne Bibliothek können Sie Folgendes tun:

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

Aber auch in jQuery können Sie Folgendes tun:

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

oder

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

In diesem Fall, wenn Sie bereits jQuery injiziert haben, sieht jQuery wahrscheinlich kürzer und browserübergreifender aus ... aber ansonsten gehe ich mit dem JSeinen ...