類別/標籤選擇器

Question

試圖添加投資組合庫到我正在製作的自定義wp主題。我已經竭盡全力去尋找解決方案和插件，甚至可以修改一些。我認爲我在尋找解決方案時遇到的一個問題是，我不完全確定哪些搜索條件可以幫助我找到類似於我想要實現的內容。

截至目前，我有以下div我的導航

<div id="tags" role="navigation"> 
<p> 
<a class="portrait" href="#portrait">Portrait</a>/
<a class="landscape" href="#landscape">Landscape</a>/
<a class="sports" href="#sports">Sports</a>/
<a class="nature" href="#nature">Nature</a>/
<a class="weddings" href="#weddings">Weddings</a>/
<a class="active" href="#">All</a> 
</p> 
</div> 

在我的導航下方是我的圖片div。我想要做的是能夠從圖像導航中選擇一個類別，並只顯示特定標記的圖像。我不想要的是爲該標籤/選擇創建一個新頁面。我希望爲所選導航重新組織或淡入/淡出圖像。

我確定有一個腳本或插件那裏會有類似於我正在尋找的。或者如何最好地實現這一點的一些指導/建議，將不勝感激。

在此先感謝。

Answer 1

流沙jQuery插件會爲你做的：

http://razorjack.net/quicksand/

同位素插件：

http://isotope.metafizzy.co/

或使用一些CSS3：

http://tympanus.net/Tutorials/CSS3FilterFunctionality/

Answer 2

假設您有一個ID爲'tagImages'的div，爲每個圖像指定一個與錨類相同名稱的數據屬性，並且此代碼應該可以工作。

預期的HTML

<div id="tagImages"> 
    <img src="/location/image.jpg" data-category="portrait" /> 
    <img src="/location/image.jpg" data-category="nature" /> 
    <img src="/location/image.jpg" data-category="nature" /> 
    <img src="/location/image.jpg" data-category="weddings" /> 
</div>​ 

jQuery代碼

$('#tags').on('click', 'a', function(e) { 
    e.preventDefault(); 
    var cat = $(this).attr('class'), 
     $tagImg = $('#tagImages').find('img'); 
    $tagImg.hide(); 
    if (cat === 'active') { 
     $tagImg.show(); 
    } else { 
     $tagImg.each(function() { 
      if ($(this).data('category') == cat) { 
       $(this).show(); 
      } 
     }); 
    } 
});​ 

這裏有一個jsFiddle Example演示你問什麼。