在HTML / Javascript中創建頁面導航

Question

我目前正在構建一個可以在index.html頁面中動態生成內容的網站，並提供過濾選項。 問題是當它沒有被過濾時，最多可能有300個項目。 我想創建一個頁面導航（如Yelp），讓用戶滾動到10個項目后的下一頁。

的index.html

<div id="content"></div>

load.js

var content = document.getElementById('content');
for (var i=0; i<somthing.length; i++) {
   var info = document.createElement('div');
   info.className = "infobox";
   info.textContent = "This is content #" + i;
   content.appendChild(info);
}

現在我的HTML應該包含所有生成的內容，但滾動瀏覽此內容將是一場噩夢。 我該如何減少它並可以選擇瀏覽頁面？

Answer 1

以下是應該有效的短分頁解決方案：

 <html> <script> function init() { var pageSize = 15; var content = document.getElementById('content'); for (var i = 0; i < 300;) { // Create page container var page = document.createElement('div'); content.appendChild(page); // Hide all content after first page if (i >= pageSize) page.style.display = "none"; for (;;) { var info = document.createElement('div'); info.className = "infobox"; info.textContent = "This is content #" + i; page.appendChild(info); // Quit when page size is reached if (i++ % pageSize == (pageSize - 1)) break; } // Create 'more' button var more = document.createElement('a'); more.href = '#'; more.textContent = "more..."; more.onclick = function(e) { this.nextSibling.style.display = "block"; this.style.display = "none"; } page.appendChild(more); content = page; } } </script> <body onload="init()"> <div id="content"></div> </body> </html>

在HTML / Javascript中創建頁面導航

問題描述

1 個解決方案

解決方案1
0 2019-03-20 01:12:37

在HTML / Javascript中創建頁面導航

問題描述

1 個解決方案

解決方案1 0 2019-03-20 01:12:37

解決方案1
0 2019-03-20 01:12:37