ページリフレッシュ後に現在のタブをアクティブにする方法jquery

Question

私のコードには2つの質問があります。

最初に： ページの更新後に最後に選択したタブを有効にしておきたい。問題は、ページの更新時に最初のタブが常にアクティブであることです。

第2： ユーザーがリンク変更パスワードでこのページに来たとき。この時点で、2番目の（パスワード変更）タブをアクティブにしたいと思います。ここで

私のコード：

<ul class="tab"> 
    <li class="current" data-tab="tab1">Account information</li> 
    <li data-tab="tab2">Change Password</li> 
</ul> 

<div class="tab-content current" id="tab1"> 
    Tab1 Content comes Here! 
</div> 
<div class="tab-content" id="tab2"> 
    Tab1 Content comes Here! 
</div> 

<script src="js/jquery-1.12.4.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $('ul.tab li').click(function(){ 
      var tab_id = $(this).attr('data-tab'); 
      $('ul.tab li').removeClass('current'); 
      $('.tab-content').removeClass('current'); 

      $(this).addClass('current'); 
      $("#"+tab_id).addClass('current'); 
     }); 
    }); 
</script> 

Answer 1

あなたがそれをしたい場合は、どこかでそれを保存する必要がありますと、あなたはその上でクラスを適用することができるようになります。

あなたはちょうど私があなたのlocalStorageに保存することができますLocal Storage

Answer 2

を使用するためにあなたを提案しますし、それを実践している場合：ここでは

$(document).ready(function() { 
    var last_id = localStorage.getItem('tab_id'); 
    if (last_id) { 
    $('ul.tab li').removeClass('current'); 
    $('.tab-content').removeClass('current'); 
    $(".tab li").eq(last_id.match(/\d+/)[0]-1).addClass('current'); 
    $("#" + last_id).addClass('current'); 
    } 
    $('ul.tab li').click(function() { 
    var tab_id = $(this).attr('data-tab'); 
    $('ul.tab li').removeClass('current'); 
    $('.tab-content').removeClass('current'); 

    $(this).addClass('current'); 
    $("#" + tab_id).addClass('current'); 
    localStorage.setItem('tab_id', tab_id); 
    }); 
}); 

は実施例である：については https://jsfiddle.net/k5j9qv4k/2/

2番目の質問、私はあなたがタブを持っているこのページにないと仮定しています。アクティブなタブ保存し、アクティブタブに現在のクラスを適用する

<a href="pageurl" onclick="localStorage.setItem('tab_id', 'tab2');">change password</a> 

Answer 3

利用のsessionStorage：次に、あなたはのlocalStorageにtab_id='tab2'を保存することができます。セッションの格納変数は、ページの更新後も引き続き維持されます。

Answer 4

これは役に立ちます。

$(document).ready(function(){ 
 
    if(localStorage.getItem("CURRENT_TAB")=="tab2"){ 
 
    var x=$("li.tab2"); 
 
    $("li").not(x).removeClass("current"); 
 
    x.addClass("current"); 
 
    } 
 
    $(".tab li").click(function(){ 
 
    if($(this).hasClass("tab2")){ 
 
     localStorage.setItem("CURRENT_TAB","tab2"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tab"> 
 
<li class="current tab1">TAB 1</li> 
 
<li class="tab2">TAB 2</li> 
 
</ul>