cambiar de urls sin que recargue el navegador y conservando información.

[Alexis88]

Si estás siguiendo ese ejemplo, necesitarás cargar la librería jQuery antes de ese bloque de código. Puedes conseguirlo en su página oficial.

Si no deseas usar librerías, puedes probar con este ejemplo:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    this.addEventListener("click", function(e){
        e.target.className == "historyAPI" && (function(event, link){
            event.preventDefault();
 
            var href = link.href;
 
            getContent(href, true);
 
            document.querySelector(".historyAPI").classList.remove("active");
            link.classList.add("active");
        })(e, e.target);
 
        window.addEventListener("popstate", function(e){
            getContent(location.pathname, false);
        });
 
        function get(url){
            return new Promise(function(done, fail){
                var xhr = new XMLHttpRequest();
 
                xhr.open("GET", url, true);
                xhr.addEventListener("load", function(){
                    this.status == 200 && done(this.responseText);
                }, false);
                xhr.send();
            });
        }
 
        function getContent(url, addEntry){
            get(url)
                .then(function(data){
                    document.querySelector("#contentHolder").innerHTML = data;
 
                    if (addEntry == true){
                        history.pushState(null, null, url);
                    }
                });
        }
    }, false);
});
 

Puedes usarlo directamente como está, sin añadir librería alguna. Son unas cuantas líneas más de código, pero muchas menos que las miles que constituyen a jQuery.