.select_btn.active{ background: red; } .js_content{ display: none; } .js_content.active{ display: block; }
タブ01 タブ02 タブ03
タブ01と紐づいているよ
タブ02と紐づいているよ
タブ03と紐づいているよ

 

読み直してみたりして試してね

jQuery(function($){ var storage = sessionStorage;// ブラウザ閉じても値を保持したいときは「localStorage」に書き換え $('#js_tabBtn .select_btn').on('click', function(){ if($(this).not('active')){ $(this).addClass('active').siblings('a').removeClass('active'); var index = $('#js_tabBtn .select_btn').index(this); $('.js_content').eq(index).addClass('active').siblings('div').removeClass('active'); // ブラウザに押されたボタンのhref情報保存 storage.setItem('language', $(this).attr("href")); console.log(storage.getItem('language')); } }); // sessionStorageとlocalStorageの設定 var storage_value = storage.getItem('language'); console.log(storage_value); if (storage_value != null) { // クッキーを持っている時の記述 $('#js_tabBtn .select_btn').removeClass('active'); $("a[href='"+storage_value+"']").addClass('active'); $(storage_value).addClass('active').siblings('div').removeClass('active'); } });
【jQuery】sessionStorageを使って最後に開いたタブを開いた状態にする
2020/05/30