simple_router

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
   <script type="text/javascript">
    (function() {
        function router() {
            // Current route url (getting rid of '#' in hash as well):
            var url = location.hash.slice(1) || '/';
            console.log(url);

            var el1 = el1 || document.getElementById('div1');
            var el2 = el2 || document.getElementById('div2');
            var el3 = el3 || document.getElementById('div3');
            var p404 = p404 || document.getElementById('p404');
            el1.style.display = 'none';
            el2.style.display = 'none';
            el3.style.display = 'none';
            p404.style.display = 'none';

            if (url === '/') {

            } else if (url === '/page1') {
                el1.style.display = 'block';
            } else if (url === '/page2') {
                el2.style.display = 'block';
            } else if (url === '/page3') {
                el3.style.display = 'block';
            } else {
                p404.style.display = 'block';
            }
        }
        // Listen on hash change:
        this.addEventListener('hashchange', router);
        // Listen on page load:
        this.addEventListener('load', router);
    })();
    </script>
    
    <a href="#">Home</a>
    <a href="#/page1">Page1</a>
    <a href="#/page2">Page2</a>
    <a href="#/page3">Page3</a>
    <div id="div1" style="display: none;">11111</div>
    <div id="div2" style="display: none;">22222</div>
    <div id="div3" style="display: none;">333333333</div>
    <div id="p404" style="display: none;">Page Not Found</div>
</body>

</html>