Bagaimana untuk Mengubah Atribut Href Tag Anchor secara Dinamik dengan JavaScript?

Patricia Arquette
Lepaskan: 2024-10-26 20:41:29
asal
276 orang telah melayarinya

How to Dynamically Change the Href Attribute of an Anchor Tag with JavaScript?

Menukar Nilai Atribut Href Teg Anchor pada Klik Butang melalui JavaScript

Mengubah suai atribut href bagi anchor () tag pada butang klik menggunakan JavaScript boleh dicapai melalui pelbagai kaedah. Berikut ialah beberapa pendekatan yang berkesan:

Menggunakan Atribut Href Kosong

Untuk mengekalkan kefungsian halaman semasa tanpa memuat semula, tetapkan atribut href kosong pada teg sauh:

<code class="html"><a href="#" onclick="f1()"></a></code>
Salin selepas log masuk

Mencegah Penatal

Tindakan lalai pautan href kosong ialah menatal halaman ke atas. Untuk mengelakkan ini, tambahkan 'return false;' pernyataan kepada fungsi onclick atau sebaris:

<code class="html"><a href="#" onclick="f1(); return false;"></a></code>
Salin selepas log masuk

Memulangkan Palsu daripada Fungsi

Anda juga boleh mengembalikan palsu dari dalam fungsi onclick:

<a href="#" onclick="return f1()"></a>

<script>
function f1() {
  // perform actions
  return false;
}
</script>
Salin selepas log masuk

Pendekatan JavaScript yang tidak mengganggu

Untuk pendekatan yang lebih teratur, gunakan JavaScript yang tidak mengganggu untuk memilih tag anchor dan mengendalikan acara klik secara berasingan:

<a href="#" id="abc"></a>
<a href="#" id="myLink"></a>

<script>
document.getElementById("myLink").onclick = function() {
  document.getElementById("abc").href = "xyz.php";
  return false;
};
</script>
Salin selepas log masuk

Oleh melaksanakan strategi ini, anda boleh mengubah suai atribut href bagi teg anchor pada klik butang dengan berkesan menggunakan JavaScript, mencapai kefungsian yang diingini dan mengekalkan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Atribut Href Tag Anchor secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!