ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。
カテゴリーの判別はjQueryのhasClassを利用します。
- すべて
- お知らせ
- イベント
- 採用
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タグにはカテゴリーのクラス名を付与します。またページ表示時は「すべて」のタブを選択状態にするためclass=”active”を付与します。コンテンツのdivタグにはclass=”news-content”を付与し、さらにカテゴリーのクラス名も付与します。
<ul class="news_link">
<li class="btn_all active">すべて</li>
<li class="btn_info">お知らせ</li>
<li class="btn_event">イベント</li>
<li class="btn_recruit">採用</li>
</ul>
<div class="news-content event">
<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 recruit">
<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 info">
<p class="news-date">2019/07/02</p>
<p class="tags">お知らせ</p>
<p class="news-r"><a href="#">お知らせ01:ダミーテキストダミーテキスト</a></p>
</div>
続いてCSSのコードです。
タブはFlexboxで横並びにしています。選択状態のタブに付ける下向き三角形は、タブのliタグの疑似要素でborderを利用して作ります。
.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の数だけコンテンツを上から順番にフェードインで表示します。この時カテゴリーはソートしません。
タブ切り替え時はまずタブのliタグのclass=”active”を削除し、クリックされたタブのliタグのみにclass=”active”を付与します。次にタブのliタグのクラス名をhasClassで調べ、カテゴリーのタブの場合のみ、そのカテゴリーのコンテンツを変数limitの数だけ上から順番にフェードインで表示します。
$(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");
if ($(this).hasClass("btn_all")) {
$(".news-content").css('display','none');
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content")[i];
$(limitNews).fadeIn();
}
} else {
$(".news-content").css('display','none');
if ($(this).hasClass("btn_info")) {
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content.info")[i];
$(limitNews).fadeIn();
}
} else if ($(this).hasClass("btn_event")) {
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content.event")[i];
$(limitNews).fadeIn();
}
} else if ($(this).hasClass("btn_recruit")) {
for(i = 0 ; i < limit ; i++) {
limitNews = $(".news-content.recruit")[i];
$(limitNews).fadeIn();
}
}
}
});
});