WordPress 文章列表实现AJAX无刷新翻页方法（wordpress跳转外链）

<div class="post-read-more"

>RZ1快乐收录网

<?php next_posts_link(更多+,);//

下一页的链接 ?>RZ1快乐收录网

</div>

jQuery(document).ready(function($) { //点击下一页的链接(即那个a标签) $(div.post-read-more a).click( function() { $this = $(this); $this.addClass(loading); //给a标签加载一个loading的class属性，可以用来添加一些加载效果 var href = $this.attr("href"); //获取下一页的链接地址 if (href != undefined) { //如果地址存在 $.ajax( { //发起ajax请求 url: href, //请求的地址就是下一页的链接 type: "get", //请求类型是get error: function(request) { //如果发生错误怎么处理 }, success: function(data) { //请求成功 $this.removeClass(loading); //移除loading属性 var $res = $(data).find(".post"); //从数据中挑出文章数据，请根据实际情况更改 $(.posts-loop).append($res); //将数据加载加进posts-loop的标签中。 var newhref = $(data).find(".post-read-more a").attr("href"); //找出新的下一页链接 if( newhref != undefined ){ $(".post-read-more a").attr("href",newhref); }else{ $(".post-read-more").hide(); //如果没有下一页了，隐藏 } } }); } return false; }); });

<script src="<?php echo get_template_directory_uri();?>/ajax.js"></script>

<div class="newslist posts-loop"> <div id="post-1" class="post"><!--第一篇文章--></div> <div id="post-2" class="post"><!--第二篇文章--></div> <div id="post-3" class="post"><!--第三篇文章--></div> <div id="post-4" class="post"><!--第四篇文章--></div> </div>