在Web開發中，點擊翻頁效果是一種常見的交互方式。它能夠讓頁面更加生動、直觀，提高用戶瀏覽體驗。下面是一個簡單的HTML點擊翻頁效果代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點擊翻頁效果示例</title>
</head>
<body>
<div class="page">
<p>第一頁</p>
</div>
<div class="page hide">
<p>第二頁</p>
</div>
<div class="page hide">
<p>第三頁</p>
</div>
<div class="page hide">
<p>第四頁</p>
</div>
<div class="page hide">
<p>第五頁</p>
</div>
<button class="prev">上一頁</button>
<button class="next">下一頁</button>
</body>
<script>
var current = 0;
var pages = document.querySelectorAll('.page');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
function showPage(n) {
pages[current].classList.add('hide');
pages[n].classList.remove('hide');
current = n;
}
prevBtn.addEventListener('click', function() {
var n = Math.max(current - 1, 0);
showPage(n);
}, false);
nextBtn.addEventListener('click', function() {
var n = Math.min(current + 1, pages.length - 1);
showPage(n);
}, false);
</script>
</html>在這個代碼中，我們首先定義了一個包含多個頁面的div容器，并通過CSS隱藏了除第一頁以外的其他頁面。接著，我們創建了上一頁和下一頁的按鈕，并通過JavaScript為它們綁定了點擊事件處理函數，通過showPage函數來實現上一頁和下一頁的跳轉效果。最后，我們通過CSS樣式來定義了頁面的顯示和隱藏效果。
以上就是一個簡單的HTML點擊翻頁效果代碼，你可以根據需求來自定義樣式和效果，提高頁面交互體驗。上一篇css 子代選擇符