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

Question

I'm using Flickity to implement a tab based content carousel. The below example uses the hash script . This allows uses to visit a specific tab eg example.com/#slide-1.

The only problem I'm having is when a user navigates to another page and goes back or refreshes the page the is-selected class resets itself on tab-nav . This means it doesn't match up to the content that's loaded.

Is there a way within javascript for the browser to remember the last is-selected position for when the user refreshes or goes back?

 .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

You can use localStorage to save the selector when the tab is clicked. At page load you can check for the last seleted tab in localStorage and set it active. It will definitely work for you if the user is refreshing the page. For handling back there are no such successfull methods you can rely on. You can turn off page cache in browser by adding Cache-Control: no-cache, no-store, must-revalidate header to your pages. If user goes back, the page will reload.