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

以下のフィドルを更新しました。各フィルター ボタンに「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 を使用して、ギャラリー内の適切に分類されたアイテムを表示/非表示にします。トランジションはお任せします。

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

于 2013-08-17T21:49:05.177 に答える