0

jQueryBBQでハッシュ履歴を持つ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-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');

デモは→ ここ ←と→ jsfiddle ←にあります。

完璧ではないと確信していますが、これが私が思いつく唯一の解決策です。それが役に立てば幸い。

于 2013-07-05T21:42:32.690 に答える