データ属性でタブ切り替え
新着情報などで、すべての記事とカテゴリーごとの記事一覧を出すやり方。
タブにデータ属性をつけて、各記事にはカテゴリーのクラスを付与。タブをクリックしたらそのカテゴリーの記事にactiveをつける（初期状態はすべてにactiveがつく）
<div class="newstabs">
<div class="newstab active" data-cat="all">すべて</div>
<div class="newstab" data-cat="news">お知らせ</div>
<div class="newstab" data-cat="recruit">採用</div>
<div class="newstab" data-cat="media">メディア</div>
</div>
<div class="newslist">
<div class="newslist_item news active">
<a href="../images/newspdf/221031_MK.pdf" target="_blank">
<div class="txt">
<time>2022.10.31</time>
<span>お知らせ</span>
<p>営業時間に関するお知らせ</p>
</div>
<div class="arw">
<img src="../images/page/news_arw.svg">
</div>
</a>
</div>
<div class="newslist_item news active">
<a href="../images/newspdf/220730_press release.pdf" target="_blank">
<div class="txt">
<time>2022.03.24</time>
<span>お知らせ</span>
<p>新商品に関するお知らせ</p>
</div>
<div class="arw">
<img src="../images/page/news_arw.svg">
</div>
</a>
</div>
<div class="newslist_item recruit active">
<a href="#">
<div class="txt">
<time>2020.07.30</time>
<span>採用情報</span>
<p>採用に関するお知らせ</p>
</div>
<div class="arw">
<img src="../images/page/news_arw.svg">
</div>
</a>
</div>
<div class="newslist_item media active">
<a href="#">
<div class="txt">
<time>2020.07.30</time>
<span>メディア掲載</span>
<p>メディア掲載に関するお知らせ</p>
</div>
<div class="arw">
<img src="../images/page/news_arw.svg">
</div>
</a>
</div>
</div>$(function () {
$('.newstab').on('click', function () {
$('.newstab').removeClass('active');
$('.newslist_item').removeClass('active');
$(this).addClass('active');
var $cat = $(this).attr("data-cat");
if ($cat == "all") {
$(".newslist_item:not(.nopost)").addClass('active');
} else {
$(".newslist_item." + $cat).addClass('active');
}
});
});