时间戳

首页 > 解决方案 > 使用 JavaScript 刷新页面后记住活动类位置

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

问题描述

我正在使用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>

标签： javascripthtmlcssflickity

解决方案

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

推荐阅读