Wie man das href-Attribut für einen Hyperlink mit jQuery ändern

Question

Wie können Sie die href Attribut (Linkziel) für einen Hyperlink mit jQuery?

Answer 1

Versuchen Sie dies;

$("#link").attr("href", "https://coenvink.com/")

Eine Aufschlüsselung, was der Code bewirkt:

$("#link")

Dieser Teil des Codes ruft das Element mit der ID "Link" auf. Danach setzen Sie das Attribut "href" (was im Grunde der Link-zu-Url ist) auf Ihre neue Url, was in diesem Fall meine eigene Website ist:

.attr("href", "https://coenvink.com/")

Ich hoffe, es ist jetzt klar!

Answer 2

Der einfachste Weg dazu ist :

Attr-Funktion (seit jQuery Version 1.0)

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

oder

Stützenfunktion (seit jQuery Version 1.6)

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

Der Vorteil der obigen Methode besteht 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, wird die spezifische Gruppe durch eine einzige Anweisung aktualisiert.

Es gibt viele Möglichkeiten, einen genauen Anker oder eine Gruppe von Ankern zu identifizieren:

Ziemlich einfache:

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

Weitere nützliche:

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

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

Wenn Sie beispielsweise eine Proxy-Website für alle URLs hinzufügen möchten, die zu google.com führen, können Sie dies 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 3

Hören Sie auf, jQuery nur um seiner selbst willen zu verwenden! Dies ist so einfach mit JavaScript nur.

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

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

Answer 4

Dieses Snippet wird aufgerufen, wenn ein Link der Klasse "menu_link" angeklickt wird, und zeigt den Text und die URL des Links an. Der Rückgabewert false verhindert, dass der Link verfolgt 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 5

href in einem Attribut, so dass Sie es mit reinen JavaScript ändern können, aber wenn Sie bereits jQuery in Ihrer Seite injiziert haben, keine Sorge, ich werde es zeigen, beide Möglichkeiten:

Stellen Sie sich vor, Sie haben Folgendes href unten:

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

Und Sie mögen es, den Link zu ändern...

Verwendung von reines JavaScript ohne eine Bibliothek, die Sie nutzen können:

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

Aber auch in jQuery können Sie tun:

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

oder

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

In diesem Fall, wenn Sie bereits jQuery injiziert haben, wahrscheinlich jQuery ein Blick kürzer und mehr Cross-Browser... aber anders als das gehe ich mit der JS eine...