2009-12-03 40 views
0

排序組合我創建的佈局爲我的新投資組合的網頁瀏覽:http://vitaminjdesign.com/work.html創建使用jQuery

我想有標籤(ALL,標誌設計,營銷,網頁設計,平面設計),當這些傳奇標籤被點擊,頁面過濾結果並顯示它們,就像它們當前顯示的一樣。首先,我希望顯示所有項目,但是當用戶點擊標籤(例如「打印設計」)時,該列表將被過濾並顯示。

如果我有這個作爲我的傳說:<a href="#" class="logos">logo</a>

,並點擊徽標時,我希望所有的div的與類「標識」的留下來,所有與其他類的div的淡出。

什麼是最簡單的方式在jQuery中使這項工作。請注意:我對jquery不是很有經驗,所以請儘可能徹底和防白癡。

+0

我發現這個,這和我想要的非常相似。我將努力使用此: http://www.askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html – JCHASE11 2009-12-04 00:34:57

回答

2

首先將適用於每個項目的類(logodesign,marketing,webdesign,printdesign)添加到您指定數字類的div中。

然後創建是要篩選就像每個標籤鏈接:

<a href='#' class="logodesign">Logo Design</a> 

然後分配一個click事件,將隱藏在他人和顯示選定的一個。

var $projects = $('#projects'); 
$('a.logodesign').click(function() { 
    hideAll(); 
    showTag('logodesign'); 
}); 
function showTag(tag){ 
    $projects.find('div.'+tag).stop(true).fadeIn(); 
} 
function hideAll(){ 
    $projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut(); 
} 
+0

非常感謝。我會嘗試。我進入腳本(下面),出現錯誤,我在這裏做錯了什麼? <腳本類型= 「文本/ JavaScript的」> $(文件)。就緒(函數(){ \t \t \t \t \t \t \t $變種項目= $( '#項目'); \t $(」 a.logodesign ')點擊(函數(){ \t \t hideAll(); \t \t showTag(' logodesign'); \t}); \t功能showTag(標籤){ \t \t $幻燈cts.find( 'div中。' +標籤)停止(真).fadeIn(); \t} \t功能hideAll(){ \t \t $ projects.find( 'div.logodesign,div.marketing,div.webdeisgn,div.preintdesign')淡出(); \t} }); – JCHASE11 2009-12-03 23:04:21

+0

請看我上面編輯的問題 – JCHASE11 2009-12-03 23:10:03

+0

遺憾的是有一個失蹤。在停止命令之前。我已經更新了答案中的代碼 – PetersenDidIt 2009-12-04 02:30:59