Halaman php menggunakan JavaScript untuk memaparkan kod tersembunyi apabila mengklik butang

PHP (Hypertext Preprocessor) ialah bahasa pengaturcaraan sebelah pelayan yang sesuai untuk pembangunan web dinamik. Dalam PHP, kami boleh menggunakan JavaScript untuk mengawal paparan halaman web, termasuk menunjukkan dan menyembunyikan blok kod. Dalam artikel ini, kami akan membincangkan cara menggunakan PHP dan JavaScript untuk menunjukkan dan menyembunyikan kod apabila butang diklik.

Langkah 1: Cipta butang

Mula-mula, buat butang dalam halaman di mana butang itu diperlukan. Untuk membuat butang, tambahkan kod berikut dalam fail HTML anda:

<button id="showCode">显示代码</button>

Dalam elemen butang ini, kami telah menentukan ID dengan nama "showCode".

Selain itu, kami juga menambahkan teks "Tunjukkan Kod" pada butang.

Langkah 2: Tambah kod yang perlu disembunyikan atau dipaparkan

Seterusnya, tambah kod yang perlu dipaparkan dan disembunyikan dalam kod halaman.

Dalam contoh ini, kami akan menggunakan elemen DIV dan beberapa kod sampel untuk menggambarkan.

Dalam fail HTML, tambahkan kod berikut:

<div id="code" style="display:none;">
    <p>这里是一些示例代码：</p>
    <ul>
        <li>代码示例1</li>
        <li>代码示例2</li>
        <li>代码示例3</li>
    </ul>
</div>

Dalam elemen DIV ini, kami mentakrifkan nama dengan "kod" ID. Selain itu, kami menetapkannya kepada "display:none;" yang bermaksud elemen akan disembunyikan semasa halaman dimuatkan.

Langkah 3: Tambah JavaScript

Untuk membolehkan butang mengawal paparan dan menyembunyikan kod, kami perlu menambah beberapa kod JavaScript.

Dalam fail HTML, tambahkan kod berikut:

<script>
    document.getElementById("showCode").addEventListener("click", function(){
        var code = document.getElementById("code");
        if(code.style.display === "none"){
            code.style.display = "block";
            document.getElementById("showCode").innerHTML = "隐藏代码";
        }else{
            code.style.display = "none";
            document.getElementById("showCode").innerHTML = "显示代码";
        }
    });
</script>

Kod JavaScript ini mentakrifkan peristiwa yang berlaku apabila butang diklik. Ia mencari elemen DIV dengan "kod" ID dan menyemak sama ada ia tersembunyi. Jika ia disembunyikan pada masa ini ia akan menunjukkan elemen div kod dan sebaliknya.

Selain itu, apabila pengguna mengklik butang, skrip akan menukar teks butang untuk menggambarkan keadaan semasa elemen div.

Langkah 4: Uji butang

Sekarang kami telah mencipta butang, menambah kod yang perlu ditunjukkan atau disembunyikan dan menambah skrip JavaScript, kami boleh menguji Adakah butang berfungsi dengan baik? Apabila mengklik butang pada halaman, kita sepatutnya melihat kod itu menunjukkan atau menyembunyikan perubahan keadaan.

Dalam contoh ini, butang akan bertukar daripada "Tunjukkan Kod" kepada "Sembunyikan Kod" untuk menggambarkan keadaan semasanya.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan PHP dan JavaScript untuk menunjukkan dan menyembunyikan kod apabila mengklik butang. Kami boleh mengawal paparan dan penyembunyian elemen kod dengan mencipta butang, menambah kod yang perlu disembunyikan atau ditunjukkan dan menggunakan JavaScript untuk membalas peristiwa klik. Apabila halaman web kami menjadi lebih kompleks, teknologi ini boleh memberi kami kawalan yang lebih fleksibel ke atas penampilan dan fungsinya.

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