Javascript 让用户在公文包页面上查看特定类别的最佳实践是什么？

这里我有一个4个类别的投资组合页面，当你第一次登陆页面时，你会看到所有的类别。但是，您可以选择从菜单中选择只显示和隐藏其余所有类别

<div class="wrapperA">
    <div class="contentB">
        <div id="portfolio-topSection">
            <a href="#" class="categoryButton-All">All</a>    
            <a href="#" class="categoryButton-VisualIdentity">Visual Identity</a>   
            <a href="#" class="categoryButton-Photography">Photography</a>      
        </div>
    </div>
</div>

<div class="wrapperB">
    <div class="content">
        <div id="portfolio-gallerySection">
        <div class="grid">
            <div class="itemWrapper categoryAll">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper categoryWebDesign">
                <a href="index.html"><img alt="" src="assets/images/11.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
        <div class="grid">
            <div class="itemWrapper categoryVisualIdentity">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper categoryPhotography">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
        <div class="grid">
            <div class="itemWrapper category-WebDesign">
                <a href="index.html"><img alt="" src="assets/images/11.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
            <div class="itemWrapper category-WebDesign">
                <a href="index.html"><img alt="" src="assets/images/me.png"></a>
                <span><p>Click To View Project</p></span>
            </div>
        </div>
    </div>
</div>
</div>

---

在小提琴中：

我已经在下面更新了你的小提琴。我为每个filter按钮提供了一个“data filter”属性，然后使用以下脚本将其作为类应用于您的库：

;(function(){
    var $portfoliogallerySection = $('#portfolio-gallerySection'),
        $filterbuttons = $('#portfolio-topSection a');
    $filterbuttons.on('click', function(){
         var $this = $(this);
         $filterbuttons.removeClass('active');
         $this.addClass('active');
         $portfoliogallerySection.attr('class', $this.data('filter'));
    });
}());

然后使用css在库中隐藏/显示适当分类的项目，我将把转换留给您

---

你的小提琴似乎缺少javascript？我不认为我现在使用的是一个好的选择，但这是我正在尝试使用的JS：

$（'.categoryButton All'）。单击（function（）{$（this.addClass（'portfolio-topSectionClicked'）；$（“#portfolio gallerySection.grid div”）。而不是（“.categoryAll”）.fadeOut（））

这非常有效，但是当单击/被选中时，如何将.active类添加到菜单按钮？更新答案中的代码块以在相应按钮上切换活动类