梦想之都-俊月星空 › 门户 ›站长分享› 前端开发 › 查看内容

js无后端实现点击加载查看更多（提示SEO友好度）

2024-11-3 12:37| 发布者: 284cc| 查看: 79| 评论: 0

摘要: 目次简朴示例HTML部门JavaScript部门拓展优化HTML隐蔽列表问题可以多次点击“查看更多”总结为了提示SEO友好度，并且避免调用后端接口给服务器造成负担，可以使用js无后端实现点击加载查看更多。比如HTML

为了提示SEO友好度，并且避免调用后端接口给服务器造成负担，可以使用js无后端实现点击加载查看更多。比如HTML中源码存在60条记录，预先表现20条记录，点击“查看更多”一次追加10条，末了一次后按钮文本改为“已查看全部”。

在JavaScript中，你可以使用以下步调来实现点击查看更多的功能：

[code]

确定触发点击事件的元素和须要表现的文章列表。
为点击事件绑定一个事件监听器。
在事件处理函数中，将原先隐蔽的文章列表添加到页面上。

[/code]

简朴示例

以下是简朴实现这一功能的示例代码：

HTML部门

[code]<button id="viewMoreButton">查看更多</button> <div id="articleList">  <div>文章1</div> <div>文章2</div> <div>文章3</div> <div>文章4</div> <div>文章5</div>  <div style="display:none;">文章6</div> <div style="display:none;">文章7</div> <div style="display:none;">文章8</div> <div style="display:none;">文章9</div> <div style="display:none;">文章10</div> </div>[/code]

JavaScript部门

[code]document.getElementById('viewMoreButton').addEventListener('click', function() { var articleList = document.getElementById('articleList'); var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]'); // 将隐蔽的文章表现出来 for (var i = 0; i < hiddenArticles.length; i++) { hiddenArticles[i].style.display = 'block'; } // 可以选择之后移除按钮大概改变按钮文本 this.remove(); // 移除按钮 // 大概 this.innerText = '已查看全部'; });[/code]

在这个例子中，初始时表现前5条文章，点击按钮后会表现隐蔽的文章列表，并且可以选择是否移除按钮大概更改按钮文本。

拓展优化

HTML隐蔽列表问题

css实现列表高出10条隐蔽

[code]#articleList div:nth-child(n+11) { display: none; }[/code]

为什么html中不使用上述方式，而使用style="display:none;"来隐蔽列表。因为js中for遍历的时候使用style="display:none;"来标记隐蔽的列表。

可以多次点击“查看更多”

HTML中的列表数量要多一些，js代码如下

[code]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<=10) { num = hiddennum; this.innerText = '已查看全部'; } for (var i = 0; i < num; i++) { hiddenArticles[i].style.display = 'block'; } } });[/code]

总结

到此这篇关于js无后端实现点击加载查看更多（提示SEO友好度）的文章就介绍到这了,更多相干js无后端实现查看更多内容请搜索脚本之家从前的文章或继续浏览下面的相干文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/3290446ub.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Markdown-it将Markdown文本剖析转换为HTML下一篇：Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta

账号		自动登录	找回密码
密码			立即注册