WordPress实现ajax无刷新筛选加载分类文章

本文介绍了在WordPress首页通过Ajax实现无刷新分类文章筛选的方法。核心是通过jQuery监听分类导航点击事件,使用Ajax获取目标页面内容并提取文章区域,通过淡入效果动态更新文章列表,同时保持当前菜单项高亮。代码简洁高效,适用于需要动态加载分类内容的场景。

WordPress基础教程
阅读时间: 7 分钟
最后更新时间:2025年11月13日

wordpress实现在首页通过ajax无刷新的方式筛选加载分类文章;效果如下:

JS代码

jQuery('.cat-nav > li > a').on('click',function(){
    var next_url = jQuery(this).attr("href");
    jQuery('.cat-nav > li').removeClass('current-menu-item');
    jQuery(this).parent().addClass('current-menu-item');
    jQuery.ajax({
        type: 'get',
        url: next_url + '#posts',
        success: function(data){
            posts = jQuery(data).find("#posts .post");
            
            if (next_url.indexOf("page") < 1) {
              jQuery("#posts").html('');
            }
            jQuery("#posts").append(posts.fadeIn(100));  
            
        }
    });
    return false;
});

添加到要显示ajax筛选分类的地方

这篇文章有用吗?

点击星号为它评分!

平均评分 0 / 5. 投票数: 0

到目前为止还没有投票!成为第一位评论此文章。

曾凤祥

曾凤祥

技术负责人
小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。

相关文章

如何让线上业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

189-0733-7671

返回顶部