JSFiddle - React, Tailwind, and code Playground

by Voron

HTML

<nav id="nav">
    <ul>
        <li><a href="index.php?id=home" data-link="home">Головна</a></li>
        <li><a href="index.php?id=portfolio" data-link="portfolio">Портфоліо</a></li>
        <li><a href="index.php?id=page-16" data-link="page-16">Послуги</a></li>
        <li><a href="index.php?id=page-2" data-link="page-2">Про мене</a></li>
        <li><a href="index.php?id=page-9" data-link="page-9">Контакти</a></li>
        <li><a href="index.php?id=blog" data-link="blog">Блоґ</a></li>
    </ul>
</nav>

JavaScript

var content = jQuery('#content')

    function changecontent(link) {
        content.load(link);
    }

    window.addEventListener('popstate', function(e){
        var link = document.location.pathname.split('/')[2];
        changecontent(link);
    }, false);

    jQuery('a').click(function() {
        var link = jQuery(this).data('link')+'.html';
        var stateObj = { foo: "bar" };
        history.pushState(stateObj, link, link);
        changecontent(link);
        return false;
    });