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片段中放置一个有效的示例，因为它在访问localStorage时有限制。

如何使用本地存储重新加载页面时存储div的活动类

1 个答案: