.js_content div{ display: none; } .js_content div.active{ display: block; }
日本語
英語
日本語テキスト01
英語テキスト01
日本語テキスト02
英語テキスト02
日本語テキスト03
英語テキスト03
jQuery(function($){ $(function(){ $('#js_tabBtn .select_btn').on('click', function(){ if($(this).not('active')){ // タブ周りの記述 $(this).addClass('active').siblings('div').removeClass('active'); // コンテンツ部分の記述 var index = $('#js_tabBtn .select_btn').index(this); $('.js_content').each(function() { $(this).children('div').eq(index).addClass('active').siblings('div').removeClass('active'); }); } }); }); });
【jQuery】タブ切り替えの対象が複数ある時
2020/03/18