Javascript 使用JQuery筛选页面内容

我试图建立一个网页，改变网页内容的按钮决定的基础上。我有下面的基本脚本，但它们需要一些帮助/逻辑

我需要帮助获得过滤器部分工作的网页的内容

谢谢大家!

//更改按钮状态-工作
$（'.category按钮'）。单击（函数（）{
$（'.category按钮'）.removeClass（'active'））
$（此）.addClass（“活动”）
});
//过滤器-不工作
$（'.page content'）.hide（）.first（）.show（）//第一个气泡或任何最先出现的东西
//将用户的选择变成过滤器
$categoryButton.on（'click'，函数（e）{
var$category=$（this.data（'target'）；
$pageContent.hide（）.filter（'.+$category.show（）；//隐藏所有内容，然后仅显示筛选的内容
});
正文{
背景：#EDE8D1；
}
.英雄{
背景#40838F；
颜色：白色；
填充：50px；
}
.类别按钮{
背景#0A1D29；
填充：50px；
颜色：白色；
文本转换：大写；
字体大小：16px；
}
.主动{
背景#40838F；
}

你好，世界！
选择一个类别：
泡沫
树
海洋
您的选择：
因此，对于第一部分，我认为您需要以下内容：

 $('.category-button').click(function(){
     $('.category-button').removeClass('active')
     $(this).addClass( "active" )
 });
 $(".category-button:eq(0)").addClass('active') // highlight the first button from the beginning

第二部分的代码比最初的要少得多。我添加了图像淡入效果，我想这就是你们所说的过滤效果

 $('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
 var $categoryButton = $('.category-button');
 var $pageContent = $('.page-content');
 $categoryButton.on('click', function(e){

  var $category = $(this).data('target');
  $pageContent
    .hide()
    .find('img').hide()
    .end() // get back to pagecontent from images
    .filter("." + $category)
    .show()
    .find('img').fadeIn(); // hide all content and then show only filtered

});


实际上，您作为示例提供的页面只有第一次具有这种效果，我假设这是因为加载了图像。在第二次、第三次等点击时，它们只是简单地显示出来。
请使用带有括号图标的按钮将代码剪切并粘贴到片段中。

根据“确定”，我删除了HTML//CSS，因为我认为不需要它。谢谢。为什么要删除html部分？我们如何看待您的标记结构？我被@zer00ne说服了。我害怕失去我的会员资格。我很抱歉。你可以在这个链接上查看整个代码：好的，谢谢，我为你找到了答案是的，这很完美。我喜欢减少代码的想法。我同意我需要的代码太多了。我已经将您的脚本添加到代码笔中，但过滤效果仍然不起作用。你有一个“分叉”的项目，我可以看到和工作？谢谢你说的过滤器是什么意思effect@Matie我已经在回复帖子的末尾添加了代码笔链接，谢谢你的想法和时间，@seethrough。它工作得很好！