構建Jquery Filter插件的hash標籤支持

我想爲我的投資組合頁面使用SUPER基本過濾系統，因此當用戶點擊「品牌」時，只需使用類別名稱的品牌顯示（其餘隱藏），以及當用戶點擊打印設計時，只是打印出來，等等。構建Jquery Filter插件的hash標籤支持

我已經使用過同位素和流沙，但是這次我想要一個沒有任何影響的超基本方法。所以我選擇使用this script。 jquery非常簡單 - 它查找與篩選器鏈接具有相同類並顯示/隱藏的投資組合項目。這裏是jQuery的：

$('ul#filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('ul#portfolio li.hidden').show().removeClass('hidden'); 
    } else { 

     $('ul#portfolio li').each(function() { 
     if(!$(this).hasClass(filterVal)) { 
      $(this).hide().addClass('hidden'); 
     } else { 
      $(this).show().removeClass('hidden'); 
     } 
    }); 
    } 

    return false; 
});

在我的頭/導航，我有導航，包括所有這些可過濾的鏈接。因此，在導航的「工作」下面，我擁有所有可過濾的對象。當用戶點擊「品牌」時，他們被帶到工作頁面，所有組合項目顯示（不是品牌項目）。這是因爲這個jQuery腳本不支持散列標籤。也就是說，過濾後的投資組合的每個狀態都沒有與其關聯的網址。我期待添加這個功能，但我不確定從哪裏開始。

我注意到有一個hashchange plugin，這似乎正是我需要的解決方案。有人可以幫助我如何去添加對hashtags的支持或者使用這個hashchange插件嗎？提前致謝！

來源

2012-05-03 JCHASE11

下面是一個使用hashchange的例子，它的工作原理很好：http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/#test1 – JCHASE11

另外：爲什麼你要顯示/隱藏元素*和*添加/刪除'.hidden' CSS類？ CSS類會不夠？ – Tomalak

如果我要刪除顯示/隱藏，腳本將不起作用！任何想法如何整合每個鏈接的散列/ URL？ – JCHASE11

不確定如果這是處理此問題的最佳方法，但我想出的解決方案是將標籤分配給導航中的每個錨鏈接。而HTEN我申請以下的jQuery，使其工作：

var thispage = window.location.hash; 

if(thispage == ''){ 
    $('ul#filter li:nth-child(1)').addClass('current'); 
} 
if(thispage == '#brand-id'){ 
    $('ul#filter li:nth-child(2)').addClass('current'); 
} 
if(thispage == '#print'){ 
    $('ul#filter li:nth-child(3)').addClass('current'); 
} 
if(thispage == '#book-and-editorial'){ 
    $('ul#filter li:nth-child(4)').addClass('current'); 
} 
if(thispage == '#web'){ 
    $('ul#filter li:nth-child(5)').addClass('current'); 
} 
if(thispage == '#packaging'){ 
    $('ul#filter li:nth-child(6)').addClass('current'); 
} 
if(thispage == '#exhibit'){ 
    $('ul#filter li:nth-child(7)').addClass('current'); 
} 

var currentpage = thispage.replace('#',''); 

$('ul#portfolio li').each(function() { 
    if(!$(this).hasClass(currentpage)) { 
     $(this).hide().addClass('hidden'); 
    } else { 
     $(this).show().removeClass('hidden'); 
    } 
});

這似乎有些力不從心，但有沒有更好的方式去了解這一點，也許它建設成原來的腳本？

來源

2012-05-03 19:37:24 JCHASE11

構建Jquery Filter插件的hash標籤支持

回答

相關問題