レスポンシブのタブメニューで、複数のタブメニューの選択とセレクトボックスの選択を連動させます。PC表示で選択しているタブの順番と、SP表示で選択しているセレクトボックスのオプションの順番が全て同じになります。
タイトル01
ダミーテキストダミーテキストダミーテキスト
タイトル02
ダミーテキストダミーテキストダミーテキストダミーテキスト
タイトル03
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
html、CSSのコードは下記の記事と同様になります。
jQueryのコードです。
タブクリック時に同一カスタムデータ属性のulタグのタブを連動して選択、セレクトボックス選択時に同一カスタムデータ属性のセレクトボックスのoptionタグを連動して選択する処理にしています。ただしセレクトボックスのoptionタグ選択は、notメソッドを利用して.not(this)で操作したセレクトボックスは除外しています。
$(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();
//同一カスタムデータ属性の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');
});
$('.select_menu').on('change', function() {
var datatab = $(this).data('tab');
var tabpanel = $('#' + datatab);
var index = $(this).prop('selectedIndex');
//同一カスタムデータ属性のselect連動(操作したセレクトボックスは除外)
$('select[data-tab='+ datatab +']').not(this).each(function() {
$(this).prop('selectedIndex', index);
});
//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');
});
});