Question

I’m attempting to perform the most basic navigation with JQuery and I’m failing miserably.

I have multiple .html files with various content, but I want to have a persistent page and load content into a div. The way I have navigation implemented at the moment:

1. User clicks NavLink1
2. JQuery executes the following:

   event.preventDefault()
   (#my-content-div).load(NavLink1-content);

3. URL now displays as “www.mydomain.com/#NavLink1”.

How in the world can I implement direct linking to #NavLink1, and/or implement a system whereas a user browses to http://www.mydomain.com/NavLink1 and the content loads properly?

My navigation code for one nav link:

    $("#story-button-link").click(function(event){
        $(this).addClass("selected");
        $("#landing-page-article").load('./story.html', function() {
            $(document).ready(function() {
            });
        });
        return false;
    });

Answer 1

If you don’t mind supporting only newer browser versions, you could use HTML5 history management features – pushState to be specific, which allows you to change the URL to yourdomain.com/NavLink1 while not reloading the page, allowing you to do the same thing but keeping the URLs intact.

If you do mind older browsers, you could use History.js which solves cross-browser compatibility problems. On newer browsers it will use the HTML5 features, and on older versions it will revert to hash changes.