HTML5 是一個極其強大的語言,它為開發人員提供了許多有用的功能和技術,使得開發者們能夠輕松地構建出高質量的網站和應用程序。其中一個有用的功能是內容翻頁。
在 HTML5 中,你可以使用一些簡單的代碼來實現這個功能。下面是一段示例代碼:
<div id="content"> <p>第一頁內容</p> <p>第二頁內容</p> <p>第三頁內容</p> </div> <button onclick="showPage(1)">第一頁</button> <button onclick="showPage(2)">第二頁</button> <button onclick="showPage(3)">第三頁</button> <script> function showPage(pageNum) { var pages = document.querySelectorAll('#content p'); for (var i = 0; i < pages.length; i++) { pages[i].style.display = 'none'; } pages[pageNum-1].style.display = 'block'; } </script>
在這段代碼中,我們首先創建了一個 id 為 "content" 的 div 元素,并將頁面需要翻頁的內容放在其中的三個 p 元素中。接著我們創建了三個按鈕元素,用來觸發 showPage 函數來切換顯示不同頁的內容。
showPage 函數接受一個 pageNum 參數,用來表示用戶想要查看的頁數。函數中使用了一個循環來將所有 p 元素都隱藏起來,然后通過頁面的索引來激活對應頁數的 p 元素,用來展示正確的內容。
這段代碼實現了一個簡單的內容翻頁功能,但你可以根據自己的需求來修改代碼以增強功能。