Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengubah Atribut Href Tag Anchor secara Dinamik dengan JavaScript?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-26 20:41:29277semak imbas

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>

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>

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>

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>

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!

Kenyataan:
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