如何使用特定過濾器鏈接到投資組合頁面？

Question

我玩的網頁看起來像這樣的投資組合部分：

$(function() { 
 
    var selectedClass = ""; 
 
    $(".fil-cat").click(function() { 
 
    selectedClass = $(this).attr("data-rel"); 
 
    $("#portfolio").fadeTo(100, 0.1); 
 
    $("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm'); 
 
    setTimeout(function() { 
 
     $("." + selectedClass).fadeIn().addClass('scale-anm'); 
 
     $("#portfolio").fadeTo(300, 1); 
 
    }, 300); 
 
    }); 
 
});

body { 
 
    max-width: 900px; 
 
    float: none; 
 
    margin: auto; 
 
} 
 

 
#portfolio { 
 
    margin: 1rem 0; 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 1rem; 
 
    -moz-column-gap: 1rem; 
 
    column-gap: 1rem; 
 
    -webkit-column-width: 33.33333333333333%; 
 
    -moz-column-width: 33.33333333333333%; 
 
    column-width: 33.33333333333333%; 
 
} 
 

 
.tile { 
 
    -webkit-transform: scale(0); 
 
    transform: scale(0); 
 
    -webkit-transition: all 350ms ease; 
 
    transition: all 350ms ease; 
 
} 
 

 
.tile:hover {} 
 

 
.scale-anm { 
 
    transform: scale(1); 
 
} 
 

 
p { 
 
    padding: 10px; 
 
    border-bottom: 1px #ccc dotted; 
 
    text-decoration: none; 
 
    font-family: lato; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
    color: #333; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
p:hover { 
 
    cursor: pointer; 
 
    background: #333; 
 
    color: #eee; 
 
} 
 

 
.tile img { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.btn { 
 
    font-family: Lato; 
 
    font-size: 1rem; 
 
    font-weight: normal; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    line-height: normal; 
 
    padding: .5rem 1rem; 
 
    margin: 0; 
 
    height: auto; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
    -webkit-appearance: none; 
 
    color: #555; 
 
    background-color: rgba(0, 0, 0, 0); 
 
} 
 

 
.btn:hover { 
 
    text-decoration: none; 
 
} 
 

 
.btn:focus { 
 
    outline: none; 
 
    border-color: var(--darken-2); 
 
    box-shadow: 0 0 0 3px var(--darken-3); 
 
} 
 

 
::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://npmcdn.com/basscss@8.0.0/css/basscss.min.css" rel="stylesheet" /> 
 
<div class="toolbar mb2 mt2"> 
 
    <button class="btn fil-cat" href="" data-rel="all">All</button> 
 
    <button class="btn fil-cat" data-rel="web">Websites</button> 
 
    <button class="btn fil-cat" data-rel="flyers">Flyers</button> 
 
    <button class="btn fil-cat" data-rel="bcards">Business Cards</button> 
 
</div> 
 

 
<div style="clear:both;"></div> 
 
<div id="portfolio"> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm flyers all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm web all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97190&w=350&h=190" alt="" /> 
 
    </div> 
 
    <div class="tile scale-anm bcards all"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97290&w=200&h=290" alt="" /> 
 
    </div> 
 
</div> 
 

 
<div style="clear:both;"></div>

從不同的網頁我有一個鏈接到投資組合部分的按鈕。但我想要的是一個按鈕（在不同的頁面），它已經到了投資組合，已經過濾到某個元素。例如，我想從另一頁面將用戶直接帶到「傳單」元素，因此不必過濾任何內容。可能嗎？我怎樣才能做到這一點？

編輯

試圖對標記爲正確的，我注意到它正在一個特定情況下的答案解決方案之後，一個爲working這是我加的東西，每當我改變我的鏈接過於/our-work#other-case頁面提出，但沒有相應的過濾

$(document).ready(function() { 
    var hash = window.location.hash.substr(1); 
    switch(hash){ 
     case 'case-one': 
     $(this).scrollTop(0); 
       $('#case-one').click(); 
     case 'working': 
     $(this).scrollTop(0); 
       $('#working').click(); 
     case 'case-two': 
     $(this).scrollTop(0); 
       $('#case-two').click(); 
     case 'case-three': 
     $(this).scrollTop(0); 
       $('#case-three').click(); 
     case 'case-four': 
     $(this).scrollTop(0); 
       $('#case-four').click(); 
    } 
}); 

Answer 1

這裏有一個不優雅，但工作只使用JS和HTML

指定錨方法標籤中的鏈接，如yourwebsite.com/portfolio#Flyers

然後

$(document).ready(function() { 
    var hash = window.location.hash.substr(1); 
    switch(hash){ 
     case 'Flyers': 
      $('#FlyersButtonId').click(); 
     ///..... case for other filters 
    } 
}); 

Answer 2

有幾種方法可以做到這一點，這樣做將manipulate the browser history你用你的過濾器，使用replaceState()方法的正確方法。

注：如果你希望用戶能夠通過不同的過濾器的狀態，因爲他們點擊後瀏覽器按鈕，您要使用pushState()代替replaceState()但一般來說，添加過濾器狀態作爲獨立的條目瀏覽器歷史記錄被認爲是不好的做法，因爲當用戶想要返回到上一頁/網站時，它會使用戶惱火。

狀態對象比這個複雜一點，但實際上，每次使用過濾器時，您只是在瀏覽器的歷史記錄中創建/替換一些後退/前進點。第三個參數是最重要的，因爲它實際上會更改瀏覽器的網址，這意味着您的用戶在任何時候都可以複製/粘貼當前地址並與其他人共享，並且他們都會看到相同的內容。

因此，修改過濾javascript和，當你申請一個過濾器還：

window.history.pushState({filcat:"whatever"}, "Title", "#whatever"); 

...其中whatever是你的應用的過濾器和「標題」是您希望自己的網頁在當標題那個狀態。根據您現有的代碼，我還使用filcat作爲state對象的屬性名稱。

當然，您還需要一個簡單的腳本，它將在頁面加載時讀取當前網址並相應地調整內容。

$(window).on('load', function(){ 
    if (window.location.hash) { 
    // do something here. 
    // For example, if window.location.hash (i.e.: "#whatever") and 
    // the id of your buttons match, you might even do: 

    $(window.location.hash).trigger('click') 
    } 
}) 

我希望我已經設定你在正確的方向。