ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。
カテゴリーの判別はjQueryのfilterを利用します。
- すべて
- お知らせ
- イベント
- 採用
2019/07/24
2019/07/18
2019/07/11
2019/07/11
2019/07/02
2019/06/21
2019/06/20
2019/06/20
2019/06/03
2019/05/29
2019/05/22
2019/05/14
2019/04/25
2019/03/01
2019/01/29
htmlのコードは下記になります。
タブのliタグにはカスタムデータ属性のdata-filter属性でカテゴリー名を付与します。コンテンツのdivタグにはカスタムデータ属性のdata-category属性でカテゴリー名を付与します。jQueryのfilterを利用したカテゴリーのソートは、このそれぞれのカスタムデータ属性の値の一致が条件となります。jQueryのhasClassは利用しないため、タブのliタグにカテゴリーのクラス名は付与しません。
<ul class="news_link">
<li class="active" data-filter="catAll">すべて</li>
<li data-filter="catInfo">お知らせ</li>
<li data-filter="catEvent">イベント</li>
<li data-filter="catRecruit">採用</li>
</ul>
<div class="news-content" data-category="catEvent">
<p class="news-date">2019/07/24</p>
<p class="tags">イベント</p>
<p class="news-r"><a href="#">イベント情報01:ダミーテキストダミーテキスト</a></p>
</div>
<div class="news-content" data-category="catRecruit">
<p class="news-date">2019/07/11</p>
<p class="tags">採用情報</p>
<p class="news-r"><a href="#">採用情報01:ダミーテキストダミーテキスト</a></p>
</div>
<div class="news-content" data-category="catInfo">
<p class="news-date">2019/07/02</p>
<p class="tags">お知らせ</p>
<p class="news-r"><a href="#">お知らせ01:ダミーテキストダミーテキスト</a></p>
</div>
続いてCSSのコードです。hasClass編と全く同じで、変更はありません。
.news_link {
display: flex;
margin: 0 0 35px;
padding: 0;
list-style-type: none;
}
.news_link li {
width: 24.7%;
margin-left: 2px;
background: #78909c;
color: #FFFFFF;
position: relative;
padding: 20px 6px 20px;
cursor: pointer;
text-align: center;
line-height: 1;
}
.news_link li:first-child {
margin-left: 0;
}
.news_link li:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 16px solid #c3d4dc;
display: none;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
}
.news_link li.active, .news_link li:hover {
background: #c3d4dc;
color: #010101;
font-weight: bold;
}
.news_link li.active:after, .news_link li:hover:after {
display: block;
}
.news-content {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
margin-bottom: 30px;
}
.news-date {
font-size: 16px;
margin-right: 20px;
}
.tags {
margin-right: 20px;
background: #c3d4dc;
min-width: 110px;
font-size: 14px;
text-align: center;
padding: 0 6px;
height: 35px;
line-height: 35px;
color: #000000;
}
.news-content .news-r a {
color: #000;
transition: color 0.2s ease-in-out;
}
.news-content .news-r a:hover {
color: #8bc73f;
transition: color 0.2s ease-in-out;
}
最後にjQueryのコードです。
ページ表示時はコンテンツを一度全て非表示にし、変数limitの数だけコンテンツを上から順番にフェードインで表示します。ここまではhasClass編と同じです。
タブ切り替え時はまずタブのliタグのclass=”active”を削除し、クリックされたタブのliタグのみにclass=”active”を付与します。次にクリックされたタブのliタグのdata-filter属性の値を調べ、カテゴリーのタブの場合のみ、そのカテゴリーのコンテンツを変数limitの数だけ上から順番にフェードインで表示します。
ここでカテゴリーのソートはjQueryのfilterを利用してしています。ソートの条件は下記の値の一致です。
・クリックされたタブのliタグのdata-filter属性の値
・コンテンツのdivタグのdata-category属性の値
$(function() {
var newsLink = $(".news_link li");
var limit = 5;
$(".news-content").css('display','none');
for(var i = 0 ; i < limit ; i++) {
var limitNews = $(".news-content")[i];
$(limitNews).fadeIn();
}
$(newsLink).click(function(){
$(newsLink).removeClass("active");
$(this).addClass("active");
var btnFilter = $(this).attr('data-filter');
if (btnFilter == 'catAll') {
$(".news-content").css('display','none');
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content")[i];
$(limitNews).fadeIn();
}
} else {
$(".news-content").css('display','none');
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content").filter('[data-category = "' + btnFilter + '"]')[i];
$(limitNews).fadeIn();
}
}
});
});