jQuery同位素 - 樣式活動類別

Question

我正在使用帶jQuery BBQ的哈希歷史記錄的jQuery同位素插件。

這裏是我的代碼：

HTML

<ul class="portfolio-categories"> 
    <li class="current-tab"><a href="#filter=*">All</a></li> 
    <li><a href="#filter=.architecture">Architecture</a></li> 
    <li><a href="#filter=.arts-crafts">Arts &amp; Crafts</a></li> 
</ul> 

jQuery的

var portfolioContainer = $('#portfolio-container'); 

portfolioContainer.isotope({ 
    itemSelector : '.portfolio-project', 
    layoutMode : 'fitRows' 
}); 

$('.portfolio-categories a').click(function(e) { 
    $(this).parents('ul').find('li').removeClass('current-tab'); 
    $(this).parent().addClass('current-tab'); 
}); 

// Keeps track of URL history for isotope categories 
$(window).bind('hashchange', function(event){ 
    var hashOptions = $.deparam.fragment(); 
    portfolioContainer.isotope(hashOptions); 
}).trigger('hashchange'); 

這個偉大的工程。您可以使用正確的URL直接鏈接到過濾器，它的排序很好。問題是如果我單擊#portfolio-container中的條目並返回，菜單的活動狀態將丟失，並且默認爲All，這很有意義，因爲current-tab CSS類僅在類別項被單擊時應用。

有沒有辦法根據過濾器指向哪個URL將current-tab類重新應用到該項目？謝謝。

Answer 1

我今天下午遇到了你的問題，希望找到答案，但沒有答案。我四處搜尋，並相信我有一個解決方案。注意到這個問題是在7個月前發佈的，我明白這可能是遲了一點。

$(window).bind('hashchange', function (event) { 
    // get options object from hash 
    var hashOptions = $.deparam.fragment(); 
    // apply options from hash 
    $container.isotope(hashOptions); 
}) 
// trigger hashchange to capture any hash data on init 

.trigger('hashchange'); 
}); 

//////// styles active menu item with hash in URL 
var currentValue = window.location.hash.substr(1); //grabs the hash from the URL 
$(document).ready(function() { 
    if ($('.portfolio-categories').find('a').hasClass('current-tab')) { //finds... 
    $('.current-tab').removeClass('current-tab'); //...and removes class for active tab 
    $('.portfolio-categories').find('a[href*="'+currentValue+'"]').addClass('current-tab'); //finds the hash in the 'ul a' tag and adds the class 
    // alert(currentValue); // a simple alert if you are curious what it's grabbing from the URL 
    }; 
}); 

//////// menu highlight http://onepagetheme.com/isotope-menu-highlight-using-selected-class/ 
var $optionSets = $('.lp-option-set'), 
$optionLinks = $optionSets.find('a'); 

$optionLinks.click(function() { 
var $this = $(this); 
// don't proceed if already selected 
if ($this.hasClass('lp-selected')) { 
    return false; 
} 
var $optionSet = $this.parents('.lp-option-set'); 
$optionSet.find('.lp-selected').removeClass('lp-selected'); 
$this.addClass('lp-selected'); 

演示可以發現→ here ←和→ jsfiddle ←。

我相信這不是完美的，但它是我能想出的唯一解決方案。希望能幫助到你。