Bagaimana untuk Mencegah Muat Semula Halaman Apabila Menukar Atribut href Tag Anchor dengan JavaScript?

Menukar Atribut href bagi Tag Anchor Menggunakan JavaScript pada Klik Butang

Dalam pembangunan web, keperluan untuk mengubah suai atribut href secara dinamik sauh tag pada butang klik kerap timbul. Begini cara anda boleh mencapainya menggunakan JavaScript.

Dalam coretan kod yang disediakan, fungsi f1() mengubah atribut href bagi elemen dengan ID "abc" kepada "xyz.php." Walau bagaimanapun, kod yang diberikan tidak akan berfungsi seperti yang diharapkan.

Secara lalai, mengklik pada teg sauh mencetuskan muat semula halaman. Untuk mengelakkan ini, anda perlu menambah atribut href kosong pada teg anchor, seperti:

<code class="html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="f1()">...jhhghj</a></code>

Sebagai alternatif, anda boleh menghalang halaman daripada menatal menggunakan:

<code class="html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="f1(); return false;">...jhhghj</a></code>

atau kembalikan false daripada fungsi f1():

<code class="javascript">function f1() {
    document.getElementById("abc").href = "xyz.php";          
    return false;
}</code>

...jhhghj

For a more unobtrusive approach, employ an external JavaScript file:

...jhg
...jhhghj

document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href = "xyz.php";
    return false;
};

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Muat Semula Halaman Apabila Menukar Atribut href Tag Anchor dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!