在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