Bagaimana untuk menggunakan JavaScript untuk memaparkan teks tersembunyi apabila mengklik butang?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi mengklik butang untuk memaparkan teks tersembunyi?

Dalam pembangunan bahagian hadapan, kami sering menghadapi keperluan untuk mengklik butang untuk menunjukkan atau menyembunyikan beberapa kandungan teks. Fungsi ini boleh dilaksanakan dengan mudah menggunakan JavaScript. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk menukar paparan dan keadaan teks tersembunyi serta memberikan contoh kod khusus.

Mula-mula, tambahkan butang dalam HTML dan kandungan teks tersembunyi yang perlu ditogol:

<button id="toggleButton">点击切换显示/隐藏</button>
<div id="textContent" style="display: none;">
    这是切换显示/隐藏的文本内容。
</div>

Dalam kod di atas, kami menambah butang dan memberikannya id unik ToggleButton. Dalam elemen <div>, kami menetapkan gaya display: none; untuk menyembunyikan kandungan teks pada mulanya. toggleButton。在 <div> 元素中，我们设置了 display: none; 的样式，来初始隐藏文本内容。

接下来，我们使用 JavaScript 来实现切换显示和隐藏的功能。在 HTML 文件中添加以下代码块：

<script>
    var toggleButton = document.getElementById("toggleButton");
    var textContent = document.getElementById("textContent");

    toggleButton.addEventListener("click", function() {
        if (textContent.style.display === "none") {
            textContent.style.display = "block";
        } else {
            textContent.style.display = "none";
        }
    });
</script>

上述代码中，我们首先获取了具有唯一 id 的按钮和文本内容的元素。然后，我们使用 addEventListener 来添加一个点击事件监听器，当按钮被点击时，执行对应的函数。

事件监听器中的函数逻辑很简单：检查文本内容的 display

Seterusnya, kami menggunakan JavaScript untuk melaksanakan paparan dan menyembunyikan fungsi pensuisan. Tambahkan blok kod berikut dalam fail HTML:

rrreee

Dalam kod di atas, kami mula-mula mendapat elemen dengan id unik butang dan kandungan teks. Kemudian, kami menggunakan addEventListener untuk menambah pendengar acara klik Apabila butang diklik, fungsi yang sepadan dilaksanakan.

Logik fungsi dalam pendengar acara adalah mudah: semak atribut display kandungan teks. Jika "tiada", tetapkannya kepada "sekat" untuk menunjukkan kandungan teks; jika "sekat", tetapkannya kepada "tiada" untuk menyembunyikan kandungan teks. 🎜🎜Kini, anda boleh menjalankan kod dalam penyemak imbas dan klik butang untuk menogol memaparkan dan menyembunyikan kandungan teks. 🎜🎜Di atas adalah langkah terperinci dan contoh kod untuk menggunakan JavaScript untuk melaksanakan fungsi mengklik butang untuk memaparkan teks tersembunyi. Dengan kod JavaScript yang mudah, anda boleh melaksanakan ciri ini dengan mudah untuk menambah interaktiviti dan pengalaman pengguna pada halaman web anda. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk memaparkan teks tersembunyi apabila mengklik butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!