Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {background:black;color:white;}
    </style>
    <script src="jquery.js"></script>
    <script src="signal.js"></script>
    <script src="history.js"></script>
    <script src="history.adapter.js"></script>
    <script src="routes.js"></script>
    <script>

        $(function(){
            // Prepare
            crossroads.addRoute('/test/{id}', function(id){
                console.log(id,'888888888888888');
            });

            // Bind to StateChange Event
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state
                console.log(State);
                crossroads.parse(document.location.pathname + document.location.search);
            });

            $("body").on("click","a[data-href]",function(e){
                e.preventDefault();
                History.pushState({state:1}, "State 1", "/test/3");
            });
        });
    </script>
</head>
<body>
 hi
<a href="#">Test</a>
<a href="/test/two">Test2</a>
<a href="#" data-href="/test/three">Test3</a>
</body>
</html>