案例一:
<div id="page1"> <h1>第一頁</h1> <p>這是第一頁內(nèi)容。</p> </div> <br> <div id="page2" style="display: none;"> <h1>第二頁</h1> <p>這是第二頁內(nèi)容。</p> </div> <br> <button onclick="showPage(1)">第一頁</button> <button onclick="showPage(2)">第二頁</button> <br> <script> function showPage(page) { if (page === 1) { document.getElementById("page1").style.display = "block"; document.getElementById("page2").style.display = "none"; } else if (page === 2) { document.getElementById("page1").style.display = "none"; document.getElementById("page2").style.display = "block"; } } </script>
在這個(gè)案例中,我們使用了兩個(gè)<div>標(biāo)簽分別代表兩個(gè)不同的頁面內(nèi)容,通過設(shè)置其中一個(gè)的display樣式為none,實(shí)現(xiàn)了一開始只顯示第一頁的效果。在按鈕的onclick事件中,通過JavaScript的代碼來控制顯示不同的頁面內(nèi)容。當(dāng)點(diǎn)擊第一頁按鈕時(shí),顯示第一頁內(nèi)容,同時(shí)隱藏第二頁內(nèi)容,反之亦然。
案例二:
<div class="page"> <h1>第一頁</h1> <p>這是第一頁內(nèi)容。</p> </div> <br> <div class="page"> <h1>第二頁</h1> <p>這是第二頁內(nèi)容。</p> </div> <br> <button id="prev" onclick="showPage('prev')">上一頁</button> <button id="next" onclick="showPage('next')">下一頁</button> <br> <script> var currentPage = 0; <br> function showPage(page) { var pages = document.getElementsByClassName("page"); if (page === "prev") { if (currentPage > 0) { currentPage--; } } else if (page === "next") { if (currentPage < pages.length - 1) { currentPage++; } } <br> for (var i = 0; i < pages.length; i++) { if (i === currentPage) { pages[i].style.display = "block"; } else { pages[i].style.display = "none"; } } <br> document.getElementById("prev").disabled = (currentPage === 0); document.getElementById("next").disabled = (currentPage === pages.length - 1); } </script>
在這個(gè)案例中,我們沒有使用id來標(biāo)識(shí)每個(gè)<div>標(biāo)簽,而是使用了相同的class來進(jìn)行標(biāo)識(shí)。通過JavaScript代碼中的showPage函數(shù)來控制顯示當(dāng)前頁的內(nèi)容,同時(shí)根據(jù)當(dāng)前頁的不同,來判斷是否將上一頁和下一頁按鈕置灰。這種方法可以適應(yīng)不同數(shù)量的頁面內(nèi)容。
起來,<div>分頁標(biāo)簽是一種實(shí)現(xiàn)網(wǎng)頁分頁效果的HTML標(biāo)簽,通過結(jié)合JavaScript代碼,可以實(shí)現(xiàn)對(duì)不同頁面內(nèi)容的切換和顯示。上述案例僅為演示,實(shí)際應(yīng)用中可以根據(jù)需求進(jìn)行適當(dāng)?shù)恼{(diào)整和擴(kuò)展,以滿足更多復(fù)雜的分頁需求。