javascript - 使用 JavaScript 刷新页面后记住事件类位置

Question

我正在使用 Flickity实现基于选项卡的内容轮播。以下示例使用 hash script .这允许用户访问特定的选项卡，例如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 header 来关闭浏览器中的页面缓存。如果用户返回，页面将重新加载。