Pertanyaan Cara mengubah href untuk hyperlink menggunakan jQuery


Bagaimana Anda dapat mengubah href untuk hyperlink menggunakan jQuery?


1087
2017-10-07 18:17


asal


Jawaban:


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

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

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

... Maka Anda mungkin tidak ingin menambahkan secara tidak sengaja href atribut untuk mereka. Untuk keamanan, kita dapat menentukan bahwa pemilih kami hanya akan cocok <a> tag dengan yang ada href atribut:

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

Tentu saja, Anda mungkin akan memiliki sesuatu yang lebih menarik dalam pikiran. Jika Anda ingin mencocokkan jangkar dengan yang ada spesifik href, Anda mungkin menggunakan sesuatu seperti ini:

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

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

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

Bagian pertama hanya memilih tautan tempat href dimulai dengan http://stackoverflow.com. Kemudian, fungsi didefinisikan yang menggunakan ekspresi reguler sederhana untuk mengganti bagian URL ini dengan yang baru. Perhatikan fleksibilitas yang diberikan kepada Anda - modifikasi apa pun pada tautan dapat dilakukan di sini.


1606
2017-10-07 18:19



Dengan jQuery 1.6 ke atas, Anda harus menggunakan:

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

Perbedaan antara prop dan attr Apakah itu attr mengambil atribut HTML sedangkan prop mengambil properti DOM.

Anda dapat menemukan detail lebih lanjut dalam posting ini: .prop () vs .attr ()


251
2018-06-14 18:28



Menggunakan attr metode pada pencarian Anda. Anda dapat mengganti atribut apa pun dengan nilai baru.

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

69
2017-10-07 18:20



Bergantung pada apakah Anda ingin mengubah semua tautan yang identik dengan yang lain atau Anda ingin mengontrol hanya tautan di suatu bagian halaman atau masing-masing secara individual, Anda dapat melakukan salah satunya.

Ubah semua tautan ke Google jadi mereka menunjuk 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 penampung 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 di dokumen, tambahkan id ke tautan dan kemudian tambahkan id itu ke pemilih. Contoh ini akan mengubah tautan Google kedua di konten, tetapi bukan yang pertama atau yang ada di catatan kaki:

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

37
2017-10-17 17:58



Meskipun OP secara eksplisit meminta jawaban jQuery, Anda tidak perlu menggunakan jQuery untuk semuanya hari ini.

Beberapa metode tanpa jQuery:

  • Jika Anda ingin mengubah href Nilai dari semua  <a> elemen, pilih semuanya lalu lakukan 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 href nilai semua <a> elemen yang sebenarnya memiliki href atribut, pilih mereka dengan menambahkan [href] selektor 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 href Nilai dari <a> elemen itu berisi 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 yang lain pemilih atribut. Contohnya:

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

    • a[href^="https://"]bisa digunakan untuk memilih <a> elemen dengan href nilai-nilai itu awalan dengan https://.

  • Jika Anda ingin mengubah href Nilai dari <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 untuk regex, di paling kasus.


29
2018-01-19 00:51



Snippet ini memanggil ketika tautan dari class 'menu_link' diklik, dan menunjukkan teks dan url dari tautan. Pengembalian palsu mencegah tautan untuk 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;
});

8
2017-12-10 06:25



Berhenti menggunakan jQuery hanya untuk kepentingannya! Ini sangat sederhana dengan JavaScript saja.

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

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


6
2017-09-01 16:17



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

2
2017-07-13 11:40



Ubah HREF dari Gambar Logo Wordpress Avada Theme

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 Appearance / Widgets dan memilih salah satu area widget footer dan menggunakan widget teks untuk menambahkan shortcode berikut

[myjavascript]

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


1
2018-03-24 17:47



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 kelompok 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 anchor through index: $("a:eq(0)")
  3. Pilih jangkar untuk kelas tertentu (seperti di kelas ini hanya jangkar dengan kelas active): $("a.active")
  4. Memilih jangkar dengan ID khusus (di sini pada contoh profileLink ID): $("a#proileLink")
  5. Memilih anchor href pertama: $("a:first")

Yang lebih berguna:

  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 URL khusus yang mengandung href: $("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 seperti:

Misalnya jika Anda ingin menambahkan situs web proxy untuk semua URL yang masuk 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);
    });
   });

1
2018-03-30 04:51