ローカルストレージを使用してページをリロードするときにdivのアクティブなクラスを保存する方法

Question

divのアクティブなクラスをページリロードに保存できません。最初のdivのボタンをクリックしてアクティブなクラスを削除し、アクティブ。しかし、ページが2番目のdivにリロードされたときに、ページがリロードされたときに2番目のdivのアクティブなクラスを保存する方法。私はローカルストレージを使用してみましたが、私はそれを知らない。ページがあるときに、これはあなたがのlocalStorageのインデックス内の要素の再設定activeクラス、代わりに全体のjQueryオブジェクトの、ローカルストレージにアクティブのdivのindexを格納し、することができます達成するために

<div class="divs active" id="first"> 
    <h1> first div</h1> 
    <a class="btn-link" href="javascript:void(0);" id="btn-first">Next - 2</a> 
</div> 
<div class="divs" id="second"> 
<h1> second div</h1> 
    <a class="btn-link" href="javascript:void(0);" id="btn-second"/>Next -3 </a> 
</div> 
<div class="divs" id="third"> 
<h1> third div</h1> 
    <a class="btn-link" href="javascript:void(0);" id="btn-third"/>Next -1</a> 
</div> 

<script> 
$(document).ready(function(){ 

    $('#btn-first').click(function(){ 
    $('.divs').removeClass('active'); 
    var activeID = $('#second').addClass('active'); 
    console.log(activeID); 
    localStorage.setItem("activeDIV", activeID); 

    //var reloadactiveDIV = localStorage.getItem("activeDIV"); 

    // var activeID = $('#second'); 
    // localStorage.setItem('activeTab', $activeID); 
    // var activeTab = localStorage.getItem('activeTab'); 
    // if (activeTab) { 
    //  $('.divs').removeClass('active'); 
    //  $('#second').addClass('active'); 
    // } 
    }); 

    $('#btn-second').click(function(){ 
    $('.divs').removeClass('active'); 
    $('#third').addClass('active'); 
    }); 
    $('#btn-third').click(function(){ 
    $('.divs').removeClass('active'); 
    $('#first').addClass('active'); 
    }); 


}); 
</script> 

Answer 1

次にロードされます。

また、すべてのボタンに対して単一のイベントハンドラを使用してロジックをDRYできることにも注意してください。 .divsという親が見つかり、次の兄弟がない場合は最初のものにループバックします。

$(document).ready(function() { 
    // set active on click: 
    $('.btn-link').click(function(e) { 
    e.preventDefault(); 
    var $parentDiv = $(this).closest('div'); 
    var $nextDiv = $parentDiv.next('div'); 
    var $divs = $('.divs').removeClass('active'); 

    if (!$nextDiv.length) 
     $nextDiv = $divs.first();  

    $nextDiv.addClass('active'); 
    localStorage.setItem("activeDiv", $nextDiv.index('.divs')); 
    }); 

    // set active on load: 
    var activeIndex = localStorage.getItem("activeDiv"); 
    if (activeIndex) 
    $('.divs').removeClass('active').eq(activeIndex).addClass('active') 
}); 

Working Example

それはのlocalStorageにアクセスする場所に制限がありますように私はSOスニペットでの作業の例を置くことができませんでした。注：これを試してみてください。