Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Elemen HTML Menggunakan JavaScript?

Cara Menyembunyikan Elemen dalam JavaScript

Menyembunyikan elemen pada halaman web boleh meningkatkan pengalaman pengguna dan meningkatkan daya tarikan visual tapak anda. Satu cara yang berkesan untuk melakukan ini dalam JavaScript ialah dengan memanfaatkan sifat gaya paparan.

Menyembunyikan Elemen Selepas Interaksi

Pertimbangkan senario di mana anda mempunyai pautan "Edit" yang, apabila diklik, sepatutnya memaparkan kawasan teks boleh diedit. Selain itu, anda ingin menyembunyikan teks pemegang tempat ("Lorem ipsum") sebaik sahaja pengguna mula mengedit. Anda boleh mencapainya dengan mengubah suai fungsi JavaScript berikut:

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';
}

Begini cara ia berfungsi:

• id ialah ID elemen yang anda mahu jadikan kelihatan (mis., textarea).
• teks ialah ID elemen yang ingin anda sembunyikan (mis., "Lorem ipsum" teks).
• btn ialah rujukan kepada elemen yang mencetuskan tindakan (cth., pautan "Edit").

Jadi, apabila pautan "Edit" diklik, JavaScript mencari kawasan teks yang sepadan dan menjadikannya kelihatan. Ia juga mencari teks pemegang tempat dan menyembunyikannya. Akhir sekali, ia menyembunyikan pautan "Edit" itu sendiri untuk mengelakkan tindakan pengeditan berulang.

Kod Contoh

Untuk melaksanakan penyelesaian ini, anda boleh menggunakan kod HTML yang diubah suai di bawah:

<td class="post">
    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
    <span>

Contoh ini menunjukkan cara menyembunyikan teks pemegang tempat dan pautan "Edit" apabila pengguna mengklik pautan "Edit". Hasilnya ialah antara muka pengeditan yang bersih dan intuitif untuk halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan dan Menunjukkan Elemen HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!