Rumah > hujung hadapan web > tutorial js > Bagaimanakah JavaScript Boleh Menyembunyikan dan Menunjukkan Elemen HTML Secara Dinamik?

Bagaimanakah JavaScript Boleh Menyembunyikan dan Menunjukkan Elemen HTML Secara Dinamik?

Linda Hamilton
Lepaskan: 2024-12-15 21:02:29
asal
665 orang telah melayarinya

How Can JavaScript Dynamically Hide and Show HTML Elements?

Menyembunyikan Elemen Secara Dinamik menggunakan JavaScript

Andaikan anda mempunyai butang yang membenarkan pengguna mengedit elemen teks. Selepas mengklik butang, anda mungkin mahu butang itu hilang dan elemen teks digantikan dengan kawasan teks untuk diedit. Begini cara anda boleh mencapainya menggunakan JavaScript:

function showStuff(id, text, btn) {
    // Display the element with the given ID
    document.getElementById(id).style.display = 'block';

    // Hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';

    // Hide the link
    btn.style.display = 'none';
}
Salin selepas log masuk

Dalam coretan HTML yang disediakan, berikut ialah cara anda boleh mengubah suainya:

<td class="post">

    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
    <span>
Salin selepas log masuk

Apabila pautan "Edit" diklik, tindakan berikut berlaku:

  • Jawapan "jawapan1" tersembunyi, yang mengandungi kawasan teks, menjadi kelihatan.
  • Rentang "teks1", yang mengandungi teks lorem ipsum, disembunyikan.
  • Pautan "Edit" itu sendiri menjadi tidak kelihatan.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Menyembunyikan dan Menunjukkan Elemen HTML Secara Dinamik?. 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