使用本地存储重新加载页面时如何存储 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

要实现这一点，您可以将活动 div 的index 存储在本地存储中，而不是整个 jQuery 对象，然后在页面被访问时在 localStorage 索引内的元素上重新设置 active 类下一个加载。

还请注意，您可以通过对所有按钮使用单个事件处理程序来干掉逻辑。您可以找到父 .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 Snippet 中放置一个工作示例，因为它对访问 localStorage 有限制。