jQuery分类内容过滤问题：页面加载时仅需显示单个分类

问题背景 #

公司搭建新网站时，为整合SEO关键词、减少页面数量，制作了带服务分类切换的博客页面——每个分类顶部固定对应文章，但WordPress原生及主题基础功能无法实现该需求。使用Themeco Cornerstone主题+内置元素开发后，分类切换功能正常，但页面加载时所有分类内容均显示，希望默认仅展示第一个分类。此前尝试添加CSS #posts-grid .x-cell:not(:first-of-type) {display: none !important;}，导致切换非首个分类后内容被永久隐藏，因JS/jQuery经验有限，排查无果。

解决方案 #

问题核心在于两点：一是缺少页面加载时的初始化隐藏逻辑，二是!important强制CSS覆盖了JS的显示控制。需从以下两方面修改：

1. 移除带!important的错误隐藏CSS，恢复JS对元素显示状态的控制权
2. 在jQuery代码中新增页面初始化逻辑，默认激活第一个导航单元格并隐藏其他分类内容

修改后的jQuery代码 #

jQuery(function($) {
    // 页面加载完成后执行初始化操作
    $(document).ready(function() {
        // 获取第一个导航单元格及对应分类class
        const firstNavCell = $('#blog-nav .x-cell').first();
        const firstCellBlock = firstNavCell.attr('class');
        const firstCellClass = firstCellBlock.substr(firstCellBlock.lastIndexOf(' ') + 1);

        // 激活第一个导航单元格样式
        firstNavCell.addClass('active-cell');
        // 隐藏所有非首个分类的内容（排除导航区域）
        $('#' + firstCellClass + '-content').siblings().not('#blog-nav').hide();
        // 确保首个分类内容正常显示
        $('#' + firstCellClass + '-content').show();
    });

    // 原有的分类切换点击逻辑
    $('#blog-nav .x-cell').click(function() {
        var cellblock = $(this).attr('class'),
            cellClass = cellblock.substr(cellblock.lastIndexOf(' ') + 1); 

        $(this).addClass('active-cell');
        $(this).siblings().removeClass('active-cell');

        $('#' + cellClass + '-content').siblings().not('#blog-nav').hide();
        $('#' + cellClass + '-content').show();
    });
});

保留原CSS（移除之前添加的错误样式） #

#blog-nav .x-cell:hover {
  cursor: pointer;
}

#blog-nav .x-cell:hover .nav-line,
#blog-nav .x-cell.active-cell .nav-line{
    width: 100% !important;
    transition: .2s ease-in-out;
}

#blog-nav .nav-line {
  transition: .5s ease-in-out;
  width: 25%;
}

说明 #

• 初始化逻辑在页面加载完成后自动执行，将第一个导航设为激活状态并隐藏其他分类内容，无需依赖CSS强制隐藏
• 移除!important的CSS后，JS的show()/hide()方法可正常控制元素显示状态，避免切换后内容永久隐藏的问题
• 原有点击切换逻辑保持不变，仅新增初始化部分即可解决默认显示问题

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