リンククリック時の動作で、PC表示でタブメニューの指定した順番のタブ、SP表示でセレクトボックスの指定した順番のオプションを選択状態にして移動します。
タイトル01
ダミーテキストダミーテキストダミーテキスト
タイトル02
ダミーテキストダミーテキストダミーテキストダミーテキスト
タイトル03
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
タブメニュー、セレクトボックスのhtml、CSSのコードは下記の記事と同様になります。
リンク部分の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;
});
});