如何通过外部 URL 访问过滤器并在菜单中仅突出显示活动过滤器类？

Question

如果您选择 class ，您将 在地址栏中Mishmash看到。https://thedivtagguy.com/#filter=.mishmash这部分运行良好，但如果您尝试转到我在上面向您展示的这个Mishmash类别 url，它只会突出显示过滤器类，而不会实际对网格进行排序。

编辑：这似乎断断续续地工作。

为什么这不起作用，代码似乎有效？

<script>

(function($) {

    

function getHashFilter() {

  var hash = location.hash;

  // get filter=filterName

  var matches = location.hash.match( /filter=([^&]+)/i );

  var hashFilter = matches && matches[1];

  return hashFilter && decodeURIComponent( hashFilter );

}

$( function() {

  var $grid = $('.isotope');

  // bind filter button click

  var $filters = $('#filters').on( 'click', 'li', function() {

    var filterAttr = $( this ).attr('data-filter');

    // set filter in hash

    location.hash = 'filter=' + encodeURIComponent( filterAttr );

  });

  var isIsotopeInit = false;

  function onHashchange() {

    var hashFilter = getHashFilter();

    if ( !hashFilter && isIsotopeInit ) {

      return;

    }

    isIsotopeInit = true;

    console.log(hashFilter);

    // filter isotope

    $grid.isotope({

      // itemSelector: '.selector.col-md-6.col-lg-4',

      filter: hashFilter

    });

    // set selected class on button

    if ( hashFilter ) {

      $filters.find('.active').removeClass('active');

      console.log($filters.find('.active'));

      $filters.find('[data-filter="' + hashFilter + '"]').addClass('active');

    }

  }

  $(window).on( 'hashchange', onHashchange );

  // trigger event handler to init Isotope

  onHashchange();

});

    

})( jQuery );

其次，我尝试将这些链接添加到我的主菜单（这样网格可以从顶部导航，如果用户在其他页面上，它会重定向到主页并只过滤网格）并且我已经输入了完整的每个类别的 URL 作为链接，所以主菜单有Mishmash带有链接的项目https://thedivtagguy.com/#filter=.mishmash。如下图所示，出于某种原因，所有链接都处于活动状态，但使用它们进行导航毫无用处；只有地址栏中的 URL 发生变化而没有实际过滤。代码的哪一部分导致了这种情况的发生以及如何使其他链接处于非活动状态？

Answer 1

您的代码中有两个主要问题：您正在.isotope选择容器，但您没有任何带有类的容器，isotope而是将代码更改为var $grid = $('.masonry');您为辅助导航菜单设置了一些类和 ID，如果您想要突出显示活动过滤器链接，也可以为主导航菜单使用相同的类。这意味着添加：2.1data-filter属性给li元素2.2var $filters = $('#filters')改为var $filters = $('#filters, #menu-portfolio-1')

Answer 2

用于显示活动类别和已排序的项目......你必须分配你的onHashchange()内部窗口 onload 功能。window.onload = function() {    onHashchange() };