为了提示SEO友好度，并且避免调用后端接口给服务器造成负担，可以使用js无后端实现点击加载查看更多。比如HTML中源码存在60条记录，预先显示20条记录，点击“查看更多”一次追加10条，最后一次后按钮文本改为“已查看全部”。
在JavaScript中，你可以使用以下步骤来实现点击查看更多的功能：
确定触发点击事件的元素和需要显示的文章列表。
为点击事件绑定一个事件监听器。
在事件处理函数中，将原先隐藏的文章列表添加到页面上。
简单示例
以下是简单实现这一功能的示例代码：
HTML部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <button id="viewMoreButton">查看更多</button><div id="articleList"> <div>文章1</div> <div>文章2</div> <div>文章3</div> <div>文章4</div> <div>文章5</div> <div>文章6</div> <div>文章7</div> <div>文章8</div> <div>文章9</div> <div>文章10</div></div> |
JavaScript部分
1 2 3 4 5 6 | document.getElementById('viewMoreButton').addEventListener('click', function() { var articleList = document.getElementById('articleList'); var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]'); // 将隐藏的文章显示出来 for (var i = 0; i |
在这个例子中，初始时显示前5条文章，点击按钮后会显示隐藏的文章列表，并且可以选择是否移除按钮或者更改按钮文本。
拓展优化
HTML隐藏列表问题
css实现列表超过10条隐藏
1 2 3 | #articleList div:nth-child(n+11) { display: none;} |
为什么html中不使用上述方式，而使用style=”display:none;”来隐藏列表。因为js中for遍历的时候使用style=”display:none;”来标记隐藏的列表。
可以多次点击“查看更多”
HTML中的列表数量要多一些，js代码如下
1 2 3 4 5 6 7 8 9 | document.getElementById('viewMoreButton').addEventListener('click', function() { var articleList = document.getElementById('articleList'); var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]'); var hiddennum = hiddenArticles.length; var num = 10; if (hiddennum==0){ alert('没有更多了'); } else { if (hiddennum |
总结
到此这篇关于js无后端实现点击加载查看更多（提示SEO友好度）的文章就介绍到这了,更多相关js无后端实现查看更多内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
