0

在这里，我有一个包含 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>

$('.categoryButton-All').click(function() {
    $(this).addClass('portfolio-topSectionClicked'); 
    $("#portfolio-gallerySection .grid div").not(".categoryAll").fadeOut(); 
});

在小提琴：http: //jsfiddle.net/4HFvx

4

1 回答 1

1

我在下面更新了你的小提琴。我为每个过滤器按钮提供一个“数据过滤器”属性，然后使用以下脚本将其作为一个类应用到您的画廊：

;(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 在图库中隐藏/显示适当分类的项目，我将把过渡留给你。

http://jsfiddle.net/4HFvx/4/

于 2013-08-17T21:49:05.177 回答