サイドバーのブロックをタブで切替え表示するJS

目的

サイドバーにタブメニューを追加し、複数ブロックを切り替え表示する。

Javascript

$(function() {

/* 対象ブロックにclass追加 */
$("[data-part-type=recent],[data-part-type=popular],[data-part-type=monthly]").addClass("module");
$(".tab_menu").parent().parent().css("margin-bottom","0.6em");

/* ブロックの見出し非表示 */
var module = $(".module");
module.find(".aside-module-title-body").hide();

/* 先頭ブロックのみ表示 */
module.hide();
module.eq(0).show();

/* タブクリック */
$(".tab").click(function() {

/* 該当タブ活性表示 */
$(".tab").removeClass("active");
$(this).addClass("active");

/* 該当ブロック表示 */
$(module).hide();
$(module).eq($(this).index()).show();
});
});

CSS

/*タブメニュー */
.tab_menu {
list-style : none;
padding : 0;
margin : 0;
display : flex;
justify-content : space-between;
border-bottom : 3px solid #333;
}

/* タブ */
.tab {
width : calc(100% / 3 - 2px); /* 表示するタブ数 */
border-radius : 5px 5px 0 0;
box-sizing : border-box;
padding : 5px;
background : #ccc;
text-align : center;
color : #fff;
cursor : pointer;
}

.tab.active {
background : #333;
}

HTML

<ul class="tab_menu">
<li class="tab active">新着記事</li>
<li class="tab">人気記事</li>
<li class="tab">アーカイブ</li>
</ul>

補足

サイドバーの各ブロックのクラスを以下に示す。

ブロックdata-part-type
新着記事recent
人気記事popular
アーカイブmonthly
新着画像imageList
リンクlinks
カテゴリー・タグcategory
地域タグlocation
コメントcomment