【js】cookieを使って最後に開いたタブを開いた状態にする

最後に切り替えたタブにcookieを持たせるコード

再度アクセスしたときに、最後にアクセスしたタブを開いた状態にするコード

cssコード

activeクラスをもたないコンテンツ部分をcssで隠す

.js_content{
  display: none;
}
.js_content.active{
  display: block;
}

htmlコード

タブとコンテンツ部分

<!-- タブの記述 -->
<div id="js_tabBtn">
  <a href="#content01" class="select_btn active">
    タブ01
  </a>
  <a href="#content02" class="select_btn">
    タブ02
  </a>
  <a href="#content03" class="select_btn">
    タブ03
  </a>
</div>

<!-- 切り替えるコンテンツ部分 -->
<div id="content01" class="js_content active">
  タブ01と紐づいているよ
</div>
<div id="content02" class="js_content">
  タブ02と紐づいているよ
</div>
<div id="content03" class="js_content">
  タブ03と紐づいているよ
</div>

必要な外部ファイル

jQueryの読み込みと「jquery.cookie.js」を読み込む

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

jsコード

タブの切り替えと最後にアクセスしたタブのアンカーリンクをcookieに保存をする

<script>
jQuery(function($){
  $('#js_tabBtn .select_btn').on('click', function(){
    if($(this).not('active')){
      // 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');
      $.cookie('activecookie',$(this).attr("href"), { expires: 30 });
      console.log($(this).attr("href"));
    }
  });

  // クッキー周りの設定
  var CookieName = $.cookie('activecookie');
  if (CookieName != null) {
    // クッキーを持っている時の記述
    $('#js_tabBtn .select_btn').removeClass('active');
    $("a[href="+'CookieName'+"]").addClass('active');
    $(CookieName).addClass('active').siblings('div').removeClass('active');
  } 
});
</script>

cookieの保存期間は30日に設定してる
これでブラウザを閉じて再度アクセスしても最後にアクセスしたタブを開いた状態にすることができる