Bagaimanakah Keterlihatan Elemen Kawalan JavaScript untuk Pengalaman Pengguna yang Lebih Baik?

Elemen Sembunyikan/Tunjukkan JavaScript: Meningkatkan Pengalaman Pengguna

Dalam pembangunan web, selalunya perlu untuk memaparkan atau menyembunyikan elemen secara dinamik pada halaman. JavaScript menawarkan API berkuasa yang membolehkan anda mengawal keterlihatan elemen untuk antara muka pengguna interaktif.

Menyembunyikan Elemen Selepas Mengklik

Pertimbangkan kod HTML berikut di mana "Edit pautan " digunakan untuk menunjukkan kawasan teks boleh diedit:

<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span>

Untuk menyembunyikan pautan "Edit" selepas ia diklik, anda boleh mengubah suai fungsi showStuff() untuk turut menyembunyikan pautan:

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the link
    btn.style.display = 'none';
}

Menyembunyikan Teks Bersama-sama Elemen

Selain itu, anda mungkin mahu menyembunyikan teks "Lorem ipsum" apabila pautan "Edit" diklik. Untuk mencapai matlamat ini, anda boleh memasukkan parameter tambahan dalam fungsi showStuff() untuk merujuk elemen yang mengandungi teks:

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

Dan dalam kod HTML:

<span>

Apabila Pautan "Edit" diklik, kedua-dua textarea dan teks "Lorem ipsum" akan disembunyikan, memberikan pengalaman yang lancar untuk pengguna.

Atas ialah kandungan terperinci Bagaimanakah Keterlihatan Elemen Kawalan JavaScript untuk Pengalaman Pengguna yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!