Fungsi Halaman Seterusnya HTML

Fungsi halaman seterusnya boleh dibuat melalui HTML. Langkah -langkah termasuk: Membuat elemen kontena, memisahkan kandungan, menambah pautan navigasi, menyembunyikan halaman lain, dan menambah skrip. Ciri ini membolehkan pengguna melayari kandungan segmen, memaparkan hanya satu halaman pada satu masa, dan sesuai untuk memaparkan sejumlah besar data atau kandungan.

Cara Membuat Fungsi Halaman Seterusnya Menggunakan HTML

Pengenalan

Halaman Buat seterusnya untuk ciri laman web membolehkan pengguna melayari satu set kandungan, hanya satu halaman yang dapat dilihat pada satu masa. Ciri ini sangat berguna untuk membentangkan sejumlah besar data atau kandungan.

langkah

Membuat ciri halaman seterusnya menggunakan HTML memerlukan langkah -langkah berikut:

1. Buat elemen kontena

Gunakan elemen <div> atau <code><section></section> untuk membuat elemen kontena yang mengandungi kandungan untuk menjadi paging. Contohnya:

 <code class="html"><div id="pagination-container">
<p> <strong>2. Kandungan Split</strong></p>
<p> Gunakan <code><div> atau <code><section></section></code> elemen untuk memecah kandungan dalam elemen kontena ke dalam bahagian. Setiap bahagian akan menjadi halaman. Contohnya:<pre class="brush:php;toolbar:false"> <code class="html"><div class="page"> <p>页面内容</p> </div> <div class="page"> <p>下一页内容</p> </div></code>

3. Tambah pautan navigasi

Tambah pautan navigasi di luar elemen kontena untuk membolehkan pengguna menavigasi antara halaman yang berbeza. Pautan boleh dibuat menggunakan elemen <a></a> . Contohnya:

 <code class="html"><a href="#">上一页</a> <a href="#">下一页</a></code>

4. Sembunyikan halaman lain

Gunakan CSS untuk menyembunyikan semua halaman kecuali halaman semasa. Contohnya:

 <code class="css">.page { display: none; } .page:first-child { display: block; }</code>

5. Tambah skrip

Tambah skrip JavaScript untuk bertindak balas kepada acara klik pautan navigasi. Skrip akan memaparkan atau menyembunyikan halaman yang sepadan. Contohnya:

 <code class="javascript">const paginationLinks = document.querySelectorAll("a"); paginationLinks.forEach((link) => { link.addEventListener("click", (e) => { e.preventDefault(); const currentPage = document.querySelector(".page:visible"); currentPage.style.display = "none"; const nextPage = currentPage.nextElementSibling; nextPage.style.display = "block"; }); });</code>

petunjuk

• Anda boleh menyesuaikan diri dengan bilangan halaman menggunakan CSS atau JavaScript.
• Anda boleh menambah butang atau elemen lain untuk mengawal navigasi halaman.
• Kandungan penomboran dan rendering boleh diproses menggunakan bahasa pengaturcaraan sisi pelayan seperti PHP atau Python.