如果您選擇 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 發生變化而沒有實際過濾。代碼的哪一部分導致了這種情況的發生以及如何使其他鏈接處于非活動狀態?
如何通過外部 URL 訪問過濾器并在菜單中僅突出顯示活動過濾器類?
慕桂英4014372
2023-06-09 17:30:38