Bagaimana Anda bisa mengubah href untuk hyperlink menggunakan jQuery?

Menggunakan

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

akan memodifikasi href dari semua hyperlink untuk mengarah ke Google. Anda mungkin ingin pemilih yang sedikit lebih halus. Misalnya, jika Anda memiliki campuran tag anchor source link (hyperlink) dan target link (alias "anchor"):

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

... Maka Anda mungkin tidak ingin secara tidak sengaja menambahkan hrefatribut kepada mereka. Untuk keamanan, kita dapat menentukan bahwa pemilih kita hanya akan mencocokkan <a>tag dengan hrefatribut yang ada :

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

Tentu saja, Anda mungkin memiliki sesuatu yang lebih menarik dalam pikiran. Jika Anda ingin mencocokkan anchor dengan yang sudah ada href, Anda dapat menggunakan sesuatu seperti ini:

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

Ini akan menemukan tautan yang hrefcocok dengan string http://www.google.com/. Tugas yang lebih terlibat mungkin cocok, kemudian memperbarui hanya sebagian dari href:

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

Bagian pertama menyeleksi link hanya di mana href dimulai dengan http://stackoverflow.com. Kemudian, suatu fungsi didefinisikan yang menggunakan ekspresi reguler sederhana untuk mengganti bagian URL ini dengan yang baru. Perhatikan fleksibilitas ini memberi Anda - segala jenis modifikasi pada tautan dapat dilakukan di sini.

Dengan jQuery 1.6 dan di atasnya Anda harus menggunakan:

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

Perbedaan antara propdan attradalah yang attrmengambil atribut HTML sedangkan propmengambil properti DOM.

Anda dapat menemukan detail lebih lanjut di pos ini: .prop () vs .attr ()

Gunakan attrmetode pada pencarian Anda. Anda dapat mengganti atribut apa pun dengan nilai baru.

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

Bergantung pada apakah Anda ingin mengubah semua tautan yang identik ke sesuatu yang lain atau Anda ingin mengontrol hanya yang ada di bagian halaman tertentu atau masing-masing secara individual, Anda bisa melakukan salah satunya.

Ubah semua tautan ke Google sehingga mengarah ke Google Maps:

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

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

Untuk mengubah tautan di bagian tertentu, tambahkan kelas div wadah ke pemilih. Contoh ini akan mengubah tautan Google di konten, tetapi tidak di footer:

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

Untuk mengubah masing-masing tautan di mana pun mereka berada dalam dokumen, tambahkan id ke tautan dan kemudian tambahkan id itu ke pemilih. Contoh ini akan mengubah tautan Google kedua dalam konten, tetapi bukan yang pertama atau yang di footer:

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

_{Meskipun OP secara eksplisit meminta jawaban jQuery, Anda tidak perlu menggunakan jQuery untuk semuanya akhir-akhir ini.}

Beberapa metode tanpa jQuery:

• Jika Anda ingin mengubah hrefnilai semua <a> elemen, pilih semuanya lalu iterasi melalui nodelist : (contoh)

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

• Jika Anda ingin mengubah hrefnilai semua <a>elemen yang benar-benar memiliki hrefatribut, pilih dengan menambahkan [href]pemilih atribut ( a[href]): (contoh)

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

• Jika Anda ingin mengubah hrefnilai <a>elemen yang mengandung nilai tertentu, misalnya google.com, gunakan pemilih atribut a[href*="google.com"]: (contoh)

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

  Demikian juga, Anda juga dapat menggunakan pemilih atribut lainnya . Contohnya:

  • a[href$=".png"]dapat digunakan untuk memilih <a>elemen yang hrefnilainya berakhir dengan .png.

  • a[href^="https://"]dapat digunakan untuk memilih <a>elemen dengan hrefnilai yang diawali dengan https://.

• Jika Anda ingin mengubah hrefnilai <a>elemen yang memenuhi beberapa kondisi: (contoh)

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

..tidak perlu regex, dalam banyak kasus.

Cuplikan ini dipanggil ketika tautan kelas 'menu_link' diklik, dan menampilkan teks dan url tautan. Return false mencegah tautan agar tidak diikuti.

<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;
});

Cara sederhana untuk melakukannya adalah:

Fungsi attr (sejak jQuery versi 1.0)

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

atau

Fungsi Prop (sejak jQuery versi 1.6)

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

Juga, keuntungan dari cara di atas adalah bahwa jika pemilih memilih jangkar tunggal, itu akan memperbarui jangkar itu saja dan jika pemilih mengembalikan sekelompok jangkar, itu akan memperbarui grup tertentu melalui satu pernyataan saja.

Sekarang, ada banyak cara untuk mengidentifikasi jangkar atau kelompok jangkar yang tepat:

Yang Cukup Sederhana:

1. Pilih jangkar melalui nama tag: $("a")
2. Pilih jangkar melalui indeks: $("a:eq(0)")
3. Pilih jangkar untuk kelas tertentu (karena di kelas ini hanya jangkar dengan kelas active):$("a.active")
4. Memilih jangkar dengan ID tertentu (di sini dalam contoh profileLink ID):$("a#proileLink")
5. Memilih jangkar href pertama: $("a:first")

Yang lebih bermanfaat:

6. Memilih semua elemen dengan atribut href: $("[href]")
7. Memilih semua jangkar dengan href spesifik: $("a[href='www.stackoverflow.com']")
8. Memilih semua jangkar yang tidak memiliki href spesifik: $("a[href!='www.stackoverflow.com']")
9. Memilih semua jangkar dengan href yang berisi URL spesifik: $("a[href*='www.stackoverflow.com']")
10. Memilih semua jangkar dengan href dimulai dengan URL spesifik: $("a[href^='www.stackoverflow.com']")
11. Memilih semua jangkar dengan href diakhiri dengan URL spesifik: $("a[href$='www.stackoverflow.com']")

Sekarang, jika Anda ingin mengubah URL tertentu, Anda dapat melakukannya sebagai:

Misalnya jika Anda ingin menambahkan situs web proxy untuk semua URL yang menuju ke google.com, Anda dapat menerapkannya sebagai berikut:

$("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);
    });
   });

Berhentilah menggunakan jQuery hanya untuk kepentingan itu! Ini sangat sederhana dengan JavaScript saja.

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");
   });

Ubah HREF dari Gambar Logo Tema Wordpress Avada

Jika Anda menginstal plugin ShortCode Exec PHP, Anda dapat membuat Shortcode ini yang saya sebut myjavascript

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

Anda sekarang dapat pergi ke Penampilan / Widget dan memilih salah satu area widget footer dan menggunakan widget teks untuk menambahkan kode pendek berikut

[myjavascript]

Selektor dapat berubah tergantung pada gambar apa yang Anda gunakan dan jika retina siap tetapi Anda selalu dapat mengetahuinya dengan menggunakan alat pengembang.

href dalam atribut, sehingga Anda dapat mengubahnya menggunakan JavaScript murni, tetapi jika Anda sudah memiliki jQuery yang disuntikkan di halaman Anda, jangan khawatir, saya akan menunjukkannya dengan dua cara:

Bayangkan Anda memiliki ini di hrefbawah ini :

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

Dan Anda ingin mengubahnya tautannya ...

Menggunakan JavaScript murni tanpa perpustakaan apa pun yang dapat Anda lakukan:

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

Tetapi juga di jQuery yang dapat Anda lakukan:

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

atau

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

Dalam hal ini, jika Anda sudah menyuntikkan jQuery, mungkin jQuery yang satu terlihat lebih pendek dan lebih banyak cross-browser ... tapi selain itu saya menggunakan yang JS...