亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何通過外部 URL 訪問過濾器并在菜單中僅突出顯示活動過濾器類?

如何通過外部 URL 訪問過濾器并在菜單中僅突出顯示活動過濾器類?

慕桂英4014372 2023-06-09 17:30:38
如果您選擇 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 發生變化而沒有實際過濾。代碼的哪一部分導致了這種情況的發生以及如何使其他鏈接處于非活動狀態?
查看完整描述

2 回答

?
Qyouu

TA貢獻1786條經驗 獲得超11個贊

您的代碼中有兩個主要問題:

  1. 您正在.isotope選擇容器,但您沒有任何帶有類的容器,isotope而是將代碼更改為var $grid = $('.masonry');

  2. 您為輔助導航菜單設置了一些類和 ID,如果您想要突出顯示活動過濾器鏈接,也可以為主導航菜單使用相同的類。這意味著添加:

    2.1data-filter屬性給li元素

    2.2var $filters = $('#filters')改為var $filters = $('#filters, #menu-portfolio-1')


查看完整回答
反對 回復 2023-06-09
?
月關寶盒

TA貢獻1772條經驗 獲得超5個贊

用于顯示活動類別和已排序的項目......你必須分配你的onHashchange()內部窗口 onload 功能。

window.onload?=?function()?{?
??onHashchange()
};
查看完整回答
反對 回復 2023-06-09
  • 2 回答
  • 0 關注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號