2
私はこのようになりますページにおけるポートフォリオのセクションで遊んだ：別のページから特定のフィルタを使用してポートフォリオページにリンクするには？
$(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/[email protected]/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>私は、ポートフォリオのセクションへのリンクとボタンがあります。しかし、私が望むのは、ポートフォリオに行くボタン（別のページにある）です。既に、特定の要素にフィルタリングしています。たとえば、別のページから、ユーザーを「フライヤー」要素にまっすぐに移動したいので、何もフィルタリングする必要はありません。出来ますか？どうすればこれを達成できますか？
編集
権利としてマークされた答えのためのソリューションを試した後、私はそれが一つの特定のケースのために働いていたことに気づいた私は、あまりにも/our-work#other-caseページを私のリンクを変更するたびに、workingとして一つは、これは、私が追加するものです提示したが応じ
$(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();
}
});
なぜこれはエレガントではありませんか？ –
あなたのURLにハッシュを持つよりも良い方法があると仮定します。私はこの作品を知っている！ – lloyd
もう一度、私は何らかの理由でこのソリューションを使用しているのは、たったの1つのケースでのみ動作することに気付きました。 –