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

明赢便利店

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

1. <ul><li>确定触发点击事件的元素和需要显示的文章列表。</li><li>为点击事件绑定一个事件监听器。</li><li>在事件处理函数中，将原先隐藏的文章列表添加到页面上。</li></ul>

复制代码

简单示例

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

HTML部分

1. <button id="viewMoreButton">查看更多</button>
   
2. <div id="articleList">
   
3.     <!-- 这里是原先隐藏的文章列表，初始显示的前5条 -->
   
4.     <div>文章1</div>
   
5.     <div>文章2</div>
   
6.     <div>文章3</div>
   
7.     <div>文章4</div>
   
8.     <div>文章5</div>
   
9.    
   
10.     <!-- 隐藏的文章列表，点击按钮后显示 -->
    
11.     <div style="display:none;">文章6</div>
    
12.     <div style="display:none;">文章7</div>
    
13.     <div style="display:none;">文章8</div>
    
14.     <div style="display:none;">文章9</div>
    
15.     <div style="display:none;">文章10</div>
    
16. </div>

复制代码

JavaScript部分

1. document.getElementById('viewMoreButton').addEventListener('click', function() {
   
2.     var articleList = document.getElementById('articleList');
   
3.     var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
   
4.    
   
5.     // 将隐藏的文章显示出来
   
6.     for (var i = 0; i < hiddenArticles.length; i++) {
   
7.         hiddenArticles[i].style.display = 'block';
   
8.     }
   
9.    
   
10.     // 可以选择之后移除按钮或者改变按钮文本
    
11.     this.remove(); // 移除按钮
    
12.     // 或者
    
13.     this.innerText = '已查看全部';
    
14. });

复制代码

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

拓展优化


HTML隐藏列表问题

css实现列表超过10条隐藏

1. #articleList div:nth-child(n+11) {
   
2.   display: none;
   
3. }

复制代码

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

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

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

1. document.getElementById('viewMoreButton').addEventListener('click', function() {
   
2.     var articleList = document.getElementById('articleList');
   
3.     var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
   
4.     var hiddennum = hiddenArticles.length;
   
5.     var num = 10;
   
6.     if (hiddennum==0){
   
7.         alert('没有更多了');
   
8.     } else {
   
9.         if (hiddennum<=10) {
   
10.             num = hiddennum;
    
11.             this.innerText = '已查看全部';
    
12.         }
    
13.         for (var i = 0; i < num; i++) {
    
14.             hiddenArticles[i].style.display = 'block';
    
15.         }
    
16.     }
    
17. });

复制代码

总结

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

来源:https://www.jb51.net/javascript/3290446ub.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！