whycomputer.com >> Rangkaian komputer >  >> Internet

Cara Membuat DIV Dilipat dengan CSS

Memperkenalkan DIV Layang-Layang (Collapsible)

Dengan menggunakan tag <div> yang boleh dilipat, anda dapat menambah kandungan tambahan tanpa mengakibatkan pengunjung meninggalkan halaman semasa ini.
Tag ini membolehkan anda menambah tajuk yang boleh dikembangkan supaya pengguna hanya melihat maklumat yang mereka minati, menjadikan laman lebih mesra pengguna dan berguna sebagai alat rujukan.

Langkah 1: Menyediakan Kandungan

Letakkan <div> di dalam bahagian <body> dan tetapkan display: none pada style.

<div id="popupText" style="display:none;">
  <h3>Popup text<br>How does this look?</h3>
</div>

Langkah 2: Membuat Tautan

Tambah <a> yang memanggil fungsi JavaScript untuk menukar keadaan paparan.

<a href="javascript:void(0);" onclick="togglePopup();">Klik untuk Expand</a>

Langkah 3: Fungsi JavaScript

Letakkan fungsi berikut di bahagian <head> atau dalam skrip di bawah.

<script>
function togglePopup() {
  var x = document.getElementById("popupText");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Tip

  • Tekan sekali pada pautan untuk menampilkan teks “Popup text” dan “How does this look?”, tekan lagi untuk menyembunyikannya.

URL:https://ms.whycomputer.com/internet/1015007853.html

Internet
  • Cara Mencipta Kolaj di Photobucket

    Perkenalan Photobucket adalah laman web yang memudahkan pengguna komputer untuk memuat naik dan berkongsi foto digital mereka. Antara pelbagai ciri yang ditawarkan, anda boleh mencipta kolaj scrapbook profesional yang boleh disimpan dalam akaun anda dan dicetak kemudian. Peralatan yang Diperlukan

  • Panduan Membuat Lajur Beserta Garisan Vertikal di Word

    Apabila menyiapkan surat khabar atau risalah, blok teks yang besar boleh menjadi membosankan dan sukar dibaca. Lebih baik menulis teks dalam lajur yang memanfaatkan ruang dan menarik secara visual. Microsoft Word mempunyai ciri membolehkan anda membuat lajur bersih dan seragam yang dipisahkan oleh r

  • Panduan Membuat Flyer CPR

    Panduan Membuat Flyer CPR Teknik CPR atau resusitasi organ daripada cedera telah menjadi pemulihan nyawa. Pada tahun 2010, ia merayakan ulang tahun ke-50. Menurut American Heart Association, menggunakan CPR selepas serangan jantung tiba‑tiba boleh menggandakan atau menambah tiga kali peluang kelangs

Rangkaian komputer © https://ms.whycomputer.com