Bagaimana untuk menggunakan JavaScript untuk memaparkan teks tersembunyi apabila mengklik butang?-tutorial js-php.cn

如何使用 JavaScript 实现点击按钮显示隐藏文本的功能？

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:

  这是切换显示/隐藏的文本内容。

Salin selepas log masuk

Dalam kod di atas, kami menambah butang dan memberikannya id unikToggleButton. Dalam elemen

, kami menetapkan gayadisplay: none;untuk menyembunyikan kandungan teks pada mulanya.toggleButton。在

元素中，我们设置了display: none;的样式，来初始隐藏文本内容。

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

Salin selepas log masuk

上述代码中，我们首先获取了具有唯一 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 addEventListeneruntuk menambah pendengar acara klik Apabila butang diklik, fungsi yang sepadan dilaksanakan.

Logik fungsi dalam pendengar acara adalah mudah: semak atribut displaykandungan 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!

Label berkaitan：

javascript 显示隐藏 klik butang

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi menyeret dan menjatuhkan untuk menukar saiz elemen? Artikel seterusnya：Bagaimanakah JavaScript melaksanakan fungsi perkaitan kotak carian?

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