JSFiddle - React, Tailwind, and code Playground

by pimvdb

HTML

<a href="#">Page 1</a>
<a href="#">Page 2</a>
<a href="#">Page 3</a>
<a href="#">Page 4</a>

JavaScript

$('a').click(function(e) {
    var index = $('a').index(this) + 1;
    
    var obj = {
        index: index
    };
    
    window.history.pushState(obj, $(this).text(), "/" + index);
    
    alert(index);
    
    e.preventDefault();
});

$(window).bind("popstate", function(e) {
    var state = e.originalEvent.state;
    
    if(state) {
        alert(state.index);
    } else {
        alert('initial state');
    }
});