记住使用 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标题来关闭浏览器中的页面缓存。如果用户返回，页面将重新加载。