0

我正在使用带有 jQ​​uery BBQ 哈希历史的 jQuery isotope 插件。

这是我的代码：

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-tabCSS 类仅在单击类别项时应用。

current-tab有没有办法根据过滤器指向的 URL 将类重新应用于项目？谢谢。

4

1 回答 1

0

今天下午我遇到了你的问题，希望能找到答案，但没有。我四处寻找，相信我有一个解决方案。注意到这个问题是在 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 ←和 at → jsfiddle ←找到。

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

于 2013-07-05T21:42:32.690 回答