如何在使用本地存儲重新加載頁面時存儲div的活動類

Question

我無法在頁面重新加載時保存div的活動類，當我單擊第一個div中的按鈕時，它的活動類被刪除並創建下一個類活性。但是，當頁面重新加載第二個div時，如何在頁面重新加載時爲第二個div保存活動類。我嘗試使用本地存儲，但我不知道。

<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

要做到這一點，你可以在active類存儲在本地存儲的活躍div的index，而不是整個jQuery對象，然後重新設置的localStorage的索引中的元素上的頁面時接下來加載。

另請注意，您可以通過對所有按鈕使用單個事件處理程序來幹掉邏輯。您可以找到父母.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

請注意，我不能把一個工作示例的一個片段SO因爲它在訪問中的localStorage地點的限制。