使用JavaScript刷新页面后记住活动类的位置

Question

我正在使用Flickity实现基于标签的内容轮播。 下面的示例使用哈希脚本 。 这允许用户访问特定的标签，例如example.com/#slide-1。

我遇到的唯一问题是，当用户导航到另一个页面并返回或刷新页面时， is-selected类在tab-nav上重置自身。 这意味着它与所加载的内容不匹配。

在JavaScript中，浏览器是否有一种方式可以记住用户刷新或返回时的最后一个is-selected位置？

 .slide-content { width: 100%; } .tab-nav a, .tab-nav a:visited, .tab-nav a:focus, .tab-nav a:hover { display: inline-block; color: #000; text-decoration: none; padding: 24px; border: 1px solid #dedede; } .tab-nav .is-selected { background: #dedede; } 

 <link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <script src="https://unpkg.com/flickity-hash@1/hash.js"></script> <nav class="tab-nav"> <a class="slide is-selected" href="#slide-1">Slide One</a> <a class="slide" href="#slide-2">Slide Two</a> <a class="slide" href="#slide-3">Slide Three</a> <a class="slide" href="#slide-4">Slide Four</a> <a class="slide" href="#slide-5">Slide Five</a> </nav> <div class="carousel"> <div class="slide-content" id="slide-1"> <p>I'm Slide One</p> </div> <div class="slide-content" id="slide-2"> <p>I'm Slide Two</p> </div> <div class="slide-content" id="slide-3"> <p>I'm Slide Three</p> </div> <div class="slide-content" id="slide-4"> <p>I'm Slide Four</p> </div> <div class="slide-content" id="slide-5"> <p>I'm Slide Five</p> </div> </div> <script> var utils = window.fizzyUIUtils; var carousel = document.querySelector('.carousel'); var flkty = new Flickity( carousel, { prevNextButtons: false, pageDots: false, hash: true }); // Elements var cellsButtonGroup = document.querySelector('.tab-nav'); var cellsButtons = utils.makeArray( cellsButtonGroup.children ); // Update buttons on select flkty.on( 'select', function() { var previousSelectedButton = cellsButtonGroup.querySelector('.is-selected'); var selectedButton = cellsButtonGroup.children[ flkty.selectedIndex ]; previousSelectedButton.classList.remove('is-selected'); selectedButton.classList.add('is-selected'); }); // Cell select cellsButtonGroup.addEventListener( 'click', function( event ) { if ( !matchesSelector( event.target, '.slide' ) ) { return; } var index = cellsButtons.indexOf( event.target ); flkty.select( index ); }); </script> 

Answer 1

单击选项卡时，可以使用localStorage保存选择器。 在页面加载时，您可以检查localStorage中最后一个选择的选项卡并将其设置为活动状态。 如果用户正在刷新页面，它将绝对为您工作。 要进行处理，没有可以依靠的成功方法。 您可以通过在页面中添加Cache-Control: no-cache, no-store, must-revalidate来关闭浏览器中的页面缓存Cache-Control: no-cache, no-store, must-revalidate标头。 如果用户返回，页面将重新加载。