タブ覚書

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

タブが上下にあって、それぞれPC用とスマホ用があるので、連動させる。
コンテンツの長さが違うので、下部のタブをクリックした時に「え？」となるため、クリック時にタブ上部にスクロール。
アンカーリンクに対応してタブを開く。

jQuery(function($){
	$('.tab').click(function(){
		$('.active').removeClass('active');
		$(this).addClass('active');
		$('.show').removeClass('show');
		const index = $(this).index();
		$('.content').eq(index).addClass('show');
		$('.tab').eq(index).addClass('active');
		$('.sp .tab').eq(index).addClass('active');
		$('.second.sp .tab').eq(index).addClass('active');
		$('.second .tab').eq(index).addClass('active');
	});
});
$("li.tab").click(function() {
    $('html, body').animate({
        scrollTop: $("#tabtop").offset().top
    }, 2000);
});
if("#aaa" == location.hash) {
    $('.tab.aaa').addClass('active');
    $('.content.aaa').addClass('show');
} else if("#bbb" == location.hash) {
    $('.tab.bbb').addClass('active');
    $('.content.bbb').addClass('show');
} else {
    $('.tab.ccc').addClass('active');
    $('.content.ccc').addClass('show');
}

スクリプトは得意ではないので、何とか探って探って、これで希望どうりに動いているので良しとする。