Cara mengubah href untuk hyperlink menggunakan jQuery


1267

Bagaimana Anda bisa mengubah href untuk hyperlink menggunakan jQuery?


12
Bagi Anda yang tertarik dengan solusi tanpa menggunakan jQuery - stackoverflow.com/questions/179713/…
Josh Crozier

1
Untuk versi jQuery yang lebih baru: stackoverflow.com/a/6348239/4928642
Qwertiy

1
contoh paling sederhana tanpa jQuery stackoverflow.com/a/39276418/696535
Pawel

Daftar lengkap solusi yang memungkinkan, beberapa penyeleksi yang berguna dan cara untuk mendapatkan nilai kecocokan regex dan menggunakannya untuk memperbarui href: stackoverflow.com/a/49568546/1262248
Aman Chhabra

Jawaban:


1832

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.


3
"Dalam HTML, nama elemen tidak peka huruf besar kecil, tetapi dalam XML mereka peka huruf besar kecil." - w3.org/TR/CSS21/selector.html
kelopak mata

47
Untuk kelengkapan, karena ini masih sering dikaitkan dengan, saya akan menambahkan bahwa sejak jQuery 1.4, contoh terakhir tidak perlu menggunakan each- berikut ini mungkin terjadi:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
David Hedlund

14
@DavidHedlund Koreksi ringan: Anda melewatkan href: ...return this.href.replace(/.../, '...'); });
Armstrongest

280

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 ()


32
Penjelasan mengapa Anda harus menggunakan proplebih dari attritu akan dihargai, untuk orang-orang yang datang ke pertanyaan dan menemukan attrternyata bekerja dengan baik di versi jQuery yang lebih baru ...
womble

11
Menggunakan @womble proplebih cepat daripada attrkarena memperbarui dom daripada memodifikasi HTML. jsfiddle.net/je4G5
Popnoodles

2
@Popnoodles Ada lebih banyak masalah dari itu, tetapi terlalu panjang untuk menjelaskan semuanya di sini. Jadi pembaca harus melihat-lihat post womble linked. Namun, ringkasan di sini akan menyenangkan, jika tidak, sedikit informasi ini akan hilang ..
Rauni Lillemets

78

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

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

2
Ini bekerja untuk saya jika saya menetapkan class = "mylink" di tag. Hanya ingin mengklarifikasi bahwa kalau-kalau ada yang mencoba mengatur name = "mylink" mirip dengan jawaban di atas dan mengharapkannya berfungsi.
cpuguru

40

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

36

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.


9

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

3
Saya tidak terlalu bertele-tele tentang down-vote, tetapi jika Anda tidak akan mengatakan mengapa Anda down-voting, tidak ada yang dicapai, dan Anda tidak perlu repot-repot.
perajin

2
Pilih-turun karena cuplikan dan jawaban Anda tidak menjawab pertanyaan awal, dan tidak benar-benar memberikan penjelasan mengapa informasi yang diperoleh menggunakan cuplikan itu membantu.
David Millar

5
Down-voting ini pedantic. Dia mungkin tidak berusaha sebanyak mungkin pada jawabannya seperti yang dilakukan pengguna lain, tetapi dia memang memberikan kode untuk menyelesaikan masalah. OP hanya perlu sedikit lebih memikirkan selain menyalin dan menempel solusi yang dibuat khusus.
Ulises

8

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:

  1. Memilih semua elemen dengan atribut href: $("[href]")
  2. Memilih semua jangkar dengan href spesifik: $("a[href='www.stackoverflow.com']")
  3. Memilih semua jangkar yang tidak memiliki href spesifik: $("a[href!='www.stackoverflow.com']")
  4. Memilih semua jangkar dengan href yang berisi URL spesifik: $("a[href*='www.stackoverflow.com']")
  5. Memilih semua jangkar dengan href dimulai dengan URL spesifik: $("a[href^='www.stackoverflow.com']")
  6. 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);
    });
   });


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

2

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.


2

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...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.