jQuery实现点击链接匹配文本筛选对应分类文章

你之前找到的代码是用来做静态自动分类归档的——逻辑是遍历所有分类把对应文章克隆到对应分类区块下，和你要的点击切换显隐的需求完全不匹配，没必要硬改那段，直接用下面的显隐逻辑即可，不需要调整你现有CMS输出的HTML结构，十几行代码就能跑通。

核心逻辑 #

• 页面初始加载时默认展示全部.tr-item文章条目
• 给.tr-nav区域内的筛选链接绑定点击事件，拦截a标签默认跳转，避免页面刷新
• 点击分类时获取当前选中的标签文本：如果是All选项就直接显示所有文章；如果是具体标签，就遍历所有文章条目，匹配.tr-category的文本内容，匹配成功的文章显示，其余隐藏
• 可选增加选中态样式，标记当前激活的分类，提升使用体验

完整代码 #

你原有的HTML结构不需要做任何修改，只需要替换JS部分即可：

$(function() {
  // 初始加载显示全部文章
  $('.tr-item').show();

  // 绑定分类点击事件
  $('.tr-nav a').on('click', function(e) {
    e.preventDefault();
    // 获取选中的分类名，trim()去除前后多余空格/换行，避免CMS输出格式问题导致匹配失败
    const selectedTag = $(this).find('.tr-title').text().trim();

    if (selectedTag === 'All') {
      $('.tr-item').show();
    } else {
      // 先隐藏所有文章，再筛选匹配分类的条目显示
      $('.tr-item').hide().filter(function() {
        return $(this).find('.tr-category').text().trim() === selectedTag;
      }).show();
    }

    // 可选：选中态高亮，不需要可以删除下面两行
    $('.tr-nav a').removeClass('active');
    $(this).addClass('active');
  })
})

如果需要选中高亮效果，补充一段CSS即可：

.tr-nav a.active .tr-title {
  color: #165DFF;
  font-weight: 600;
}

扩展说明 #

如果后续需要支持一篇文章对应多个分类，只需要把筛选判断的逻辑改成包含匹配即可，不用调整整体结构：

// 多分类匹配逻辑替换原来的全等判断即可
return $(this).find('.tr-category').text().trim().indexOf(selectedTag) > -1;

内容的提问来源于stack exchange，提问作者Axion