1

我有一个非常简单的测试页面，使用了出色的 Isotope 和 BBQ jQuery 插件。

这两个插件的组合效果很好，但我不知道如何在单击后退按钮时使活动类别链接突出显示。

这是我的 HTML：

<div id="wrapper">

<div id="sidebar">

<ul class="nav">
<li><a href="#filter=*" class="selected">All</a></li>
<li><a href="#filter=.red">Red</a></li>
<li><a href="#filter=.orange">Orange</a></li>
<li><a href="#filter=.yellow">Yellow</a></li>
<li><a href="#filter=.green">Green</a></li>
<li><a href="#filter=.blue">Blue</a></li>
<li><a href="#filter=.black">Black</a></li>
</ul>

</div>

<div id="gallery">

<div class="box red" style="background-color:red;"></div>
<div class="box orange" style="background-color:orange;"></div>
<div class="box yellow" style="background-color:yellow;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box blue" style="background-color:blue;"></div>
<div class="box black" style="background-color:black;"></div>
<div class="box blue" style="background-color:blue;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box red" style="background-color:red;"></div>
<div class="box black" style="background-color:black;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box orange" style="background-color:orange;"></div>            

</div>

</div>

这是我的脚本：

$(document).ready(function(){
  // cache container
  var $container = $('#gallery');
  // initialize isotope
  $container.isotope({
    // options
    filter: '*',
    animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false
    }
});


// FILTER

$('ul.nav a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ 
  filter: selector 
  });
  return false;
});


// HIGHLIGHT SELECTED MENU ITEM

  var $optionSets = $('ul.nav'),
  $optionLinks = $optionSets.find('a');

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


// HASH HISTORY WITH JQUERY BBQ

$('ul.nav a').click(function(){
  // get href attr, remove leading #
  var href = $(this).attr('href').replace( /^#/, '' ),
  // convert href into object
  // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
  option = $.deparam( href, true );
  // set hash, triggers hashchange on window
  $.bbq.pushState( option );
  return false;
});

$(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');

});

任何帮助，将不胜感激 ？？？

我认为解决方案并不难，因为 HTML 代码和 Isotope 选项非常简单，但我不是网站管理员。

干杯

4

0 回答 0