javascript - 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');

可以找到Demo → here ←在 → jsfiddle ← .

我敢肯定它并不完美，但这是我能想到的唯一解决方案。希望对您有所帮助。