HTML 다음 페이지 기능

다음 페이지 기능은 HTML을 통해 만들 수 있습니다. 단계에는 컨테이너 요소 만들기, 컨텐츠 분할, 탐색 링크 추가, 다른 페이지 숨기기 및 스크립트 추가가 포함됩니다. 이 기능을 통해 사용자는 세그먼트 된 컨텐츠를 탐색하여 한 번에 한 페이지 씩 만 표시 할 수 있으며 많은 양의 데이터 또는 콘텐츠를 표시하는 데 적합합니다.

HTML을 사용하여 다음 페이지 기능을 만드는 방법

소개

웹 사이트 기능의 다음 페이지 생성을 통해 사용자는 일련의 컨텐츠를 탐색 할 수 있으며 한 번에 한 페이지 만 볼 수 있습니다. 이 기능은 대량의 데이터 또는 컨텐츠를 제시하는 데 매우 유용합니다.

단계

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과 같은 서버 측 프로그래밍 언어를 사용하여 페이지 매김 및 렌더링 컨텐츠를 처리 할 수 ​​있습니다.