WordPress分页加载更多ajax
发布时间:2025-10-19 15:34:56 本站作者 【 字体:大 中 小 】 浏览:5 次
不适用分页,转而采用在文章列表下方插入下一页列表的方式进行加载,这是ajax分页的另一种形式。下面是实现方法
html结构
<div id="pagination" class="noajx"><?php next_posts_link('▼ 加载更多...'); ?></div> <div id="loadmore"><a href="JavaScript:;">▼ 正在加载 ...</a></div>
js代码
这已经是冒泡绑定,所以全站ajax时不需要放入回调重载内
$(document).on('click','#pagination a:not(.noajx)',function(){ var _this = $(this); var next = _this.attr("href").replace('?ajx=contAIner',''); var docH = $(document).height(); var pagination = '#pagination'; // 下一页按钮标签id var pagenav = '#main .page-navigator'; $(pagination).hide(); $("#loadmore").show(); $.ajax({ url: next, beforeSend: function(){ // }, success: function (data) { $('#main .blog-content').append($(data).find('#main .post-box')); //追加内容 $(pagination).html( $(data).find(pagination).html() ); //更新分页导航 $(pagenav).html( $(data).find(pagenav).html() ); //更新分页导航 // 后退前进处理 //var state = {url: next,title: $(data).find("title").text(),html: $(data).find('#ajx_content').html()}; //window.history.pushState(state,"", next); //$('html, body').animate({scrollTop: docH-280}, 500); //上滚 nextHref = $(data).find("#pagination a").attr("href"); if ( nextHref != undefined ) { $(pagination).show(); $("#loadmore").hide(); $("#pagination a").attr("href", nextHref); } else { $(pagination).show(); $("#loadmore").hide(); $(pagination).html('<a href="javascript:;" class="noajx">这是最后一页了!</a>'); //最后一页 } }, complete: function(){ // 回调 // }, error: function() { // 错误时的处理 location.href = next; //页面错误时跳转到请求的页面 } }); return false; });
参考CSS
#pagination {clear:both;margin: 0 auto;padding:20px;width:180px} #pagination a{background:#eee;display: block;line-height: 35px;height:38px;text-align: center;font-size: 14px;color: #666} #pagination a:hover{background:#58749c;color:#fff} #loadmore{clear:both;margin: 0 auto;padding:20px;width:180px;display:none} #loadmore a{background:#58749c;display: block;line-height: 35px;height:38px;text-align: center;font-size: 14px;color: #fff}
热门推荐
广告位-300PX*250PX
最新发布

office2010密钥,office2010激活密钥,office2010永久密钥激活码最新分享

不少用户在求2018最新Microsoft Office 2010产品密钥,office2010密钥有两种,office2010永久密钥和免费版office密钥,office2010激活码最新的已发布很快就失效了,只有kms客户端免费版office激活密钥是永久有效的。下面小编为大家整理分享office2010最新密钥序列号,不区分32位和64位。说明:office2010零售版密钥和kms密钥...

office365激活密钥,小编分享2025最新office365激活码

office365是微软办公套件office的年度服务,那么最近有用户想要office365激活码,过通整理,下面小编把2018年最新office365激活码和激活电脑上office365软件的方法分享给大家。2018年 office365激活码大全:RCBQN-J4MK8-VV3XJ-BPPYB-TXVT77TPNM-PMWKF-WVHKV-G869H-9BQ6XDMXHM-GNMM3-MYHHK-6TVT2-XTKKKG9N...

office2018产品密钥,小编告诉你office2018怎么激活

office2018是微软公司即将发布的一款全新的办公自动化软件,可以说各个行业都必备的;office2018全新版本功能全面升级,具有强大的数据处理、数据计算、图形编辑、演示文稿的制作和文档排版等功能,那么哪里有office2018产品密钥?下面,小编给大家带来了office2018产品密钥。office2018是微软公司开发的一款基于Windows操作...

怎么激活office2019最新版?office 2019激活秘钥+激活工具推荐

最新激活密钥GRBR4-J4N3M-KTX9C-JM4PJ-J8HPT (小编使用的是此激活密钥)NJHVR-FK6XR-M97MB-P8CXD-FM4PJNXVJY-X9T8G-Y6RWG-8VQ7V-PWHPTW8W6K-3N7KK-PXB9H-8TD8W-BWTH9N9J9Q-Q7MMP-XDDM6-63KKP-76FPM9DP6T-9AGWG-KWV33-9MPC8-JDCVF7G2HE-JR8KL-ABB9D-Y7789-GLNFLU2PWU-H7D9H-69T3B-JEYC2-3R2NGR8R8P-MTT6F-KLRPM-J7CAB-PJM8CA4...
大家都在看
office2010密钥,office2010激活密钥,office2010永久密钥激活码最新分享

office365激活密钥,小编分享2025最新office365激活码

office2018产品密钥,小编告诉你office2018怎么激活

怎么激活office2019最新版?office 2019激活秘钥+激活工具推荐

Office2019 激活密钥, Office2019 怎么激活激活?

Office2016激活密钥专业增强版(神Key)Office2016永久激活密钥[2025.10更新]
![Office2016激活密钥专业增强版(神Key)Office2016永久激活密钥[2025.10更新]](/static/upload/image/20251020/1760945332659252.jpg)
office2016永久激活密钥从哪里找?永久激活office2016的方法,一步一步的详细教程来了

office2016怎么激活密钥?office2016怎么安装?今天一文讲清楚

Office2016最新激活密钥分享,office2016密钥永久激活码

office2010永久秘钥是多少 office2010序列号分享 附激活工具
