jQueryでタブメニューを作る方法を解説！

<!-- タブメニュー -->
<a class="tab_menu active" href="#item1">タブ1</a>
<a class="tab_menu" href="#item2">タブ2</a>
<a class="tab_menu" href="#item3">タブ3</a>

<!-- タブのコンテンツ部分 -->
<div class="tab_item active" id="item1">タブ1のコンテンツ</div>
<div class="tab_item" id="item2">タブ2のコンテンツ</div>
<div class="tab_item" id="item3">タブ3のコンテンツ</div>

/*最初は表示されないように*/
.tab_item {
  display: none;
}

/*activeクラスが付与されたとき*/
.active {
  display: block;
  opacity: 1;
  border-bottom: solid 1px tomato;
  background: tomato;
  color: #fff;
}

a { 
  cursor: pointer;
  color: tomato;
}

.tab_menu {
  display: inline-block;
  width: 100px;
  padding: 5px;
  font-size: 18px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  border: solid 1px tomato;
}

.tab_item {
  font-size: 16px;
  height: 200px;
  padding: 20px;
  background-color: tomato;
}

$(function() {
	//タブをクリックしたら発動
	$('.tab_menu').on('click', function() {
		//選択されていた.tab_itemからactiveクラスを取り除く
		$('.tab_item').removeClass('active');
		//クリックされた.tab_itemにactiveクラスを付与
		$($(this).attr('id')).addClass('active');
		//選択されていた.tab_menuからactiveクラスを取り除く
		$('.tab_menu').removeClass('active');
		//クリックされた.tab_menuにactiveクラスを付与
		$(this).addClass('active');
	});
});

$(function() {
	$('.tab_menu').on('click', function() {
		$('.tab_item').removeClass('active');
		$($(this).attr('id')).addClass('active');
		$('.tab_menu').removeClass('active');
		$(this).addClass('active');
	});

    //ここから下を追加
  
    $('.tab_menu').click(function() {
        //コンテンツを一旦非表示
        $('.tab_item').css('display','none');
        //クリックしたタブに応じてコンテンツを表示
        $($(this).attr('id')).fadeIn(500).addClass('active');
        });
});