如何用JavaScript实现页面初始仅展示特色项而非全部内容？

API 探路者

2026-7-23

解决方案

要实现页面加载时只展示id为feature的分类内容，只需在现有代码基础上添加初始化过滤逻辑即可，不用去修改元素的all类（移除all类会导致你的选择器document.querySelectorAll('.all')抓不到对应元素，反而出问题）。

修改步骤：

页面加载完成后，主动触发一次针对feature分类的过滤操作，同时把对应的分类标题设为激活状态。

修改后的完整代码：

const categoryTitle = document.querySelectorAll('.category-title');
const allCategoryPosts = document.querySelectorAll('.all');

for(let i = 0; i < categoryTitle.length; i++){
    categoryTitle[i].addEventListener('click', filterPosts.bind(this, categoryTitle[i]));
}

function filterPosts(item){
    changeActivePosition(item);
    for(let i = 0; i < allCategoryPosts.length; i++){
        if(allCategoryPosts[i].classList.contains(item.attributes.id.value)){
            allCategoryPosts[i].style.display = "block";
        } else {
            allCategoryPosts[i].style.display = "none";
        }
    }
}

function changeActivePosition(activeItem){
    for(let i = 0; i < categoryTitle.length; i++){
        categoryTitle[i].classList.remove('active');
    }
    activeItem.classList.add('active');
};

// 新增：页面初始化时默认过滤feature分类
const defaultActiveTitle = document.getElementById('feature');
if(defaultActiveTitle) {
    filterPosts(defaultActiveTitle);
}