HTML次ページ関数

次のページ関数は、HTMLを介して作成できます。手順には、コンテナ要素の作成、コンテンツの分割、ナビゲーションリンクの追加、他のページの隠し、スクリプトの追加が含まれます。この機能により、ユーザーはセグメント化されたコンテンツを閲覧でき、一度に1つのページのみを表示し、大量のデータやコンテンツを表示するのに適しています。

HTMLを使用して次のページ機能を作成する方法

導入

Webサイト機能の次のページの作成により、ユーザーはコンテンツのセットを閲覧できます。一度に1ページのみを表示できます。この機能は、大量のデータやコンテンツを提示するのに非常に役立ちます。

ステップ

HTMLを使用して次のページ機能を作成するには、次の手順が必要です。

1.コンテナ要素を作成します

<div>または<code><section></section>要素を使用して、ページングするコンテンツを含むコンテナ要素を作成します。例えば：

 <code class="html"><div id="pagination-container">
<p> <strong>2。コンテンツを分割します</strong></p>
<p><code><div>または<code><section></section></code>要素を使用して、コンテナ要素の内容をセクションに分割します。各セクションはページになります。例えば：<pre class="brush:php;toolbar:false"> <code class="html"><div class="page"> <p>页面内容</p> </div> <div class="page"> <p>下一页内容</p> </div></code>

3.ナビゲーションリンクを追加します

コンテナ要素の外側にナビゲーションリンクを追加して、ユーザーが異なるページ間でナビゲートできるようにします。 <a></a>要素を使用してリンクを作成できます。例えば：

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

4。他のページを非表示にします

CSSを使用して、現在のページを除くすべてのページを非表示にします。例えば：

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

5.スクリプトを追加します

JavaScriptスクリプトを追加して、ナビゲーションリンクのクリックイベントに応答します。スクリプトは、対応するページを表示または非表示にします。例えば：

 <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>

ヒント

• CSSまたはJavaScriptを使用してページ数を適応的に調整できます。
• ボタンまたはその他の要素を追加して、ページナビゲーションを制御できます。
• PHPやPythonなどのサーバー側のプログラミング言語を使用して、コンテンツとレンダリングを処理できます。