Bagaimana Anda bisa mengubah href untuk hyperlink menggunakan jQuery?
javascript
jquery
hyperlink
Brian Boatright
sumber
sumber
Jawaban:
Menggunakan
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"):
... Maka Anda mungkin tidak ingin secara tidak sengaja menambahkan
href
atribut kepada mereka. Untuk keamanan, kita dapat menentukan bahwa pemilih kita hanya akan mencocokkan<a>
tag denganhref
atribut yang ada :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:Ini akan menemukan tautan yang
href
cocok dengan stringhttp://www.google.com/
. Tugas yang lebih terlibat mungkin cocok, kemudian memperbarui hanya sebagian darihref
: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.sumber
each
- berikut ini mungkin terjadi:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
href
:...return this.href.replace(/.../, '...'); });
Dengan jQuery 1.6 dan di atasnya Anda harus menggunakan:
Perbedaan antara
prop
danattr
adalah yangattr
mengambil atribut HTML sedangkanprop
mengambil properti DOM.Anda dapat menemukan detail lebih lanjut di pos ini: .prop () vs .attr ()
sumber
prop
lebih dariattr
itu akan dihargai, untuk orang-orang yang datang ke pertanyaan dan menemukanattr
ternyata bekerja dengan baik di versi jQuery yang lebih baru ...prop
lebih cepat daripadaattr
karena memperbarui dom daripada memodifikasi HTML. jsfiddle.net/je4G5Gunakan
attr
metode pada pencarian Anda. Anda dapat mengganti atribut apa pun dengan nilai baru.sumber
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:
Untuk mengubah tautan di bagian tertentu, tambahkan kelas div wadah ke pemilih. Contoh ini akan mengubah tautan Google di konten, tetapi tidak di footer:
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:
sumber
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
href
nilai semua<a>
elemen, pilih semuanya lalu iterasi melalui nodelist : (contoh)Jika Anda ingin mengubah
href
nilai semua<a>
elemen yang benar-benar memilikihref
atribut, pilih dengan menambahkan[href]
pemilih atribut (a[href]
): (contoh)Jika Anda ingin mengubah
href
nilai<a>
elemen yang mengandung nilai tertentu, misalnyagoogle.com
, gunakan pemilih atributa[href*="google.com"]
: (contoh)Demikian juga, Anda juga dapat menggunakan pemilih atribut lainnya . Contohnya:
a[href$=".png"]
dapat digunakan untuk memilih<a>
elemen yanghref
nilainya berakhir dengan.png
.a[href^="https://"]
dapat digunakan untuk memilih<a>
elemen denganhref
nilai yang diawali denganhttps://
.Jika Anda ingin mengubah
href
nilai<a>
elemen yang memenuhi beberapa kondisi: (contoh)..tidak perlu regex, dalam banyak kasus.
sumber
Cuplikan ini dipanggil ketika tautan kelas 'menu_link' diklik, dan menampilkan teks dan url tautan. Return false mencegah tautan agar tidak diikuti.
sumber
Cara sederhana untuk melakukannya adalah:
Fungsi attr (sejak jQuery versi 1.0)
atau
Fungsi Prop (sejak jQuery versi 1.6)
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:
$("a")
$("a:eq(0)")
active
):$("a.active")
profileLink
ID):$("a#proileLink")
$("a:first")
Yang lebih bermanfaat:
$("[href]")
$("a[href='www.stackoverflow.com']")
$("a[href!='www.stackoverflow.com']")
$("a[href*='www.stackoverflow.com']")
$("a[href^='www.stackoverflow.com']")
$("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:
sumber
Berhentilah menggunakan jQuery hanya untuk kepentingan itu! Ini sangat sederhana dengan JavaScript saja.
https://jsfiddle.net/bo77f8mg/1/
sumber
sumber
Ubah HREF dari Gambar Logo Tema Wordpress Avada
Jika Anda menginstal plugin ShortCode Exec PHP, Anda dapat membuat Shortcode ini yang saya sebut myjavascript
Anda sekarang dapat pergi ke Penampilan / Widget dan memilih salah satu area widget footer dan menggunakan widget teks untuk menambahkan kode pendek berikut
Selektor dapat berubah tergantung pada gambar apa yang Anda gunakan dan jika retina siap tetapi Anda selalu dapat mengetahuinya dengan menggunakan alat pengembang.
sumber
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
href
bawah ini :Dan Anda ingin mengubahnya tautannya ...
Menggunakan JavaScript murni tanpa perpustakaan apa pun yang dapat Anda lakukan:
Tetapi juga di jQuery yang dapat Anda lakukan:
atau
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
...sumber