在頁面加載中使用url #value篩選未排序的列表

我正在通過創建組合網站來破解我的方式，並且通過對投資組合元素的Javascript/Jquery篩選來減輕負擔。因爲我對它很陌生，所以我使用一個非常基本的過濾器來保持簡單，該過濾器使用另一個過濾器顯示/隱藏未排序列表「組合」中的元素，當它被點擊時用作過濾器「過濾器」。在頁面加載中使用url #value篩選未排序的列表

在頁面本身，工作正常，鏈接正在過濾，因爲它們應該但我想在網站的其他地方添加一個鏈接返回到投資組合頁面，該頁面將使用#value相應地過濾投資組合。例如，我想要鏈接到'portfolio.html＃東西'來將'東西'的過濾器應用到我的列表中。在Google搜索這些部分之後，我發現它已經被取消並被發現。

任何人都可以幫助總noob？我創建了一個用的jsfiddle JS和HTML，我使用目前的位置：http://jsfiddle.net/2x7xme5u/6/

這是我使用的那一刻該JS：

$(document).ready(function() { 
$('ul#filter a').click(function() { 
$(this).css('outline', 'none'); 
$('ul#filter .current').removeClass('current'); 
$(this).parent().addClass('current'); 

var filterVal = $(this).text().toLowerCase().replace(' ', '-'); 

if (filterVal == 'all') { 
    $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); 
} else { 

    $('ul#portfolio li').each(function() { 
     if (!$(this).hasClass(filterVal)) { 
      $(this).fadeOut('slow').addClass('hidden'); 
     } else { 
      $(this).fadeIn('slow').removeClass('hidden'); 
     } 
    }); 
} 

return false;

道歉，如果我錯過了一些明顯的明顯信息！

嘎！ - 現在與公共小提琴。（對不起）

在此先感謝。

來源

2014-09-22 Euan Mackay

你可以使用

var url = window.location.href; 
var anchor = url.substring(url.indexOf("#")); 
var tag = anchor.substring(1); 

if (tag) { 
    if (tag == 'all') { 
     $('ul#portfolio li.hidden').show(); 
    } else { 

     $('ul#portfolio li').each(function() { 
      if (!$(this).hasClass(tag)) { 
       $(this).hide().addClass('hidden'); 
      } else { 
       $(this).show().removeClass('hidden'); 
      } 
     }); 
    } 
}

見的jsfiddle http://jsfiddle.net/bevanr01/bs45px6f/7/

來源

2014-09-22 14:02:52

感謝@拉塞爾 - 貝文這是一個真正有用的開始錨標記。因此，現在我可以定義錨定變量併爲其賦值，我將如何創建一個if循環來檢查'anchor'的值是否是我的一個篩選器？道歉，我真的很陌生，而且很懦弱。 – 2014-09-22 15:57:04

不用擔心，給我幾個，我會更新我的答案。 – 2014-09-22 15:58:00

@EuanMackay看到我更新的jsfiddle – 2014-09-22 16:14:26

在頁面加載中使用url #value篩選未排序的列表

回答

相關問題