【タブメニュー】指定のタブまたはセレクトボックスを選択して移動

リンククリック時の動作で、PC表示でタブメニューの指定した順番のタブ、SP表示でセレクトボックスの指定した順番のオプションを選択状態にして移動します。

タブメニュー、セレクトボックスのhtml、CSSのコードは下記の記事と同様になります。

【タブメニュー】SP表示でセレクトボックスに切り替え

レスポンシブのタブメニューでSP表示の場合はセレクトボックスにします。タブメニュー、セレクトボックス、どちらも同一のコンテンツを表示します。

tech.brick-plan.jp

2021.02.11

タイトル03を選択して移動

リンク部分のhtmlです。
タブメニューのulタグとセレクトボックスのselectタグに付与しているdata-tab=”tab01″のカスタムデータ属性を、リンクのaタグにも付与します。また、選択状態にするタブおよびオプションの順番を、data-tab-open=”3″のように番号で指定します。

<a href="" data-tab="tab01" data-tab-open="3" class="tab_jump js-tab-jump">タイトル03を選択して移動</a>

jQueryのコードです。
リンククリック時にタブメニューの該当の順番のタブ、セレクトボックスの該当の順番のoptionタグを選択し、それに対応するコンテンツを表示します。また、表示したコンテンツへ移動します。

$(function() {
	$('.tab_menu li').on('click tap', function() {
		var tabmenu = $(this).parents('.tab_menu');
		var datatab = $(tabmenu).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).index();

		tabmenu.children().removeClass('selected');
		$(this).addClass('selected');

		//select連動
		$('select[data-tab='+ datatab +']').each(function() {
			$(this).prop('selectedIndex', index);
		});

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');
	});

	$('.select_menu').on('change', function() {
		var datatab = $(this).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).prop('selectedIndex');

		//ul連動
		$('ul[data-tab='+ datatab +']').each(function() {
			$(this).children().removeClass('selected');
			$(this).children().eq(index).addClass('selected');
		});

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');
	});

	$('.js-tab-jump').on('click tap', function() {
		var datatab = $(this).data('tab');
		var tabpanel = $('#' + datatab);
		var index = $(this).data('tab-open') - 1;

		//ul連動
		$('ul[data-tab='+ datatab +']').each(function() {
			$(this).children().removeClass('selected');
			$(this).children().eq(index).addClass('selected');
		});

		//select連動
		$('select[data-tab='+ datatab +']').each(function() {
			$(this).prop('selectedIndex', index);
		});

		tabpanel.children().removeClass('is-show');
		tabpanel.children().eq(index).addClass('is-show');

		$('body, html').animate({ scrollTop: tabpanel.offset().top }, 300, 'swing');
		return false;
	});
});