htmlhideshow

Paparan tersembunyi HTML merujuk kepada penggunaan kod CSS atau JavaScript untuk mengawal paparan atau penyembunyian elemen dalam halaman Web. Teknologi ini digunakan secara meluas dalam reka bentuk dan pembangunan tapak web, dan boleh membantu tapak web mengoptimumkan pengalaman pengguna dan meningkatkan interaktiviti halaman.

Dalam halaman web, selalunya perlu untuk mengawal paparan atau penyembunyian elemen tertentu. Sebagai contoh, apabila pengguna meletakkan tetikus pada butang, menu lungsur perlu dipaparkan apabila pengguna mengklik pada pautan, beberapa kandungan perlu dipaparkan secara dinamik. Dalam senario ini, teknologi paparan tersembunyi boleh berguna.

Terdapat banyak cara untuk melaksanakan paparan tersembunyi HTML Berikut adalah beberapa daripadanya:

1. Gunakan CSS untuk melaksanakan paparan tersembunyi

CSS ialah. a Bahasa untuk mengawal gaya halaman Web, ia boleh menyembunyikan dan memaparkan elemen dengan menetapkan atribut paparan. Apabila atribut paparan ditetapkan kepada tiada, elemen akan disembunyikan; apabila atribut paparan ditetapkan kepada nilai lain seperti blok atau sebaris, elemen akan dipaparkan.

Berikut ialah contoh menggunakan CSS untuk melaksanakan paparan tersembunyi:

<style>
    .box {
        display: none;
    }
    .button:hover + .box {
        display: block;
    }
</style>
<button class="button">显示/隐藏内容</button>
<div class="box">这是要显示/隐藏的内容</div>

Dalam kod di atas, kami mentakrifkan elemen dengan kotak kelas dan menetapkan atribut paparannya kepada tiada, supaya ia dipaparkan secara lalai menyembunyikan. Kemudian butang dengan butang kelas ditakrifkan Apabila tetikus meluncur ke atas butang ini, elemen kotak boleh dipaparkan Gunakan pemilih + untuk memilih elemen kotak sejurus selepas butang.

2. Gunakan JavaScript untuk menyembunyikan dan memaparkan

JavaScript ialah bahasa skrip yang biasa digunakan untuk interaksi halaman web. Ia boleh menyembunyikan dan memaparkan dengan mengawal atribut gaya elemen. Apabila sifat style.display ditetapkan kepada tiada, elemen akan disembunyikan; apabila sifat style.display ditetapkan kepada nilai lain seperti blok atau sebaris, elemen akan dipaparkan.

Berikut ialah contoh penggunaan JavaScript untuk melaksanakan paparan tersembunyi:

<button onclick="toggle()">显示/隐藏内容</button>
<div id="box" style="display: none;">这是要显示/隐藏的内容</div>
<script>
    function toggle() {
        var box = document.getElementById("box");
        if (box.style.display === "none") {
            box.style.display = "block";
        } else {
            box.style.display = "none";
        }
    }
</script>

Dalam kod di atas, kami mentakrifkan elemen dengan id kotak dan menetapkan atribut style.displaynya kepada tiada kepada jadikannya Tersembunyi secara lalai. Kemudian fungsi toggle() ditakrifkan untuk mengawal paparan dan menyembunyikan elemen kotak. Apabila butang diklik, fungsi toggle() akan menentukan keadaan semasa elemen kotak Jika ia berada dalam keadaan tersembunyi, ia akan dipaparkan jika ia berada dalam keadaan yang dipaparkan, ia akan disembunyikan.

3. Gunakan jQuery untuk melaksanakan paparan tersembunyi

jQuery ialah pustaka JavaScript yang biasa digunakan untuk pembangunan halaman web, yang boleh memudahkan kerumitan pengekodan JavaScript. Anda boleh menyembunyikan dan menunjukkan elemen menggunakan kaedah hide() dan show() jQuery.

Berikut ialah contoh penggunaan jQuery untuk melaksanakan paparan tersembunyi:

<button id="toggle">显示/隐藏内容</button>
<div id="box" style="display: none;">这是要显示/隐藏的内容</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $("#toggle").click(function() {
        $("#box").toggle();
    });
</script>

Dalam kod di atas, kami menggunakan perpustakaan jQuery dan mengikat fungsi toggle() pada acara klik togol butang. Apabila butang diklik, fungsi togol() akan menentukan sama ada untuk menunjukkan atau menyembunyikan berdasarkan keadaan semasa elemen kotak.

Tiga kaedah di atas semuanya boleh mencapai kesan menyembunyikan dan memaparkan HTML Pembangun boleh memilih kaedah yang sesuai mengikut keperluan sebenar. Dalam pembangunan sebenar, penyelesaian optimum harus dipilih berdasarkan kerumitan dan keperluan prestasi halaman.

Atas ialah kandungan terperinci htmlhideshow. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!