CODEWITHSUNDEEP
jqueryhtmlajaxnavigation
Chad_C
Chad_C

Reputation: 188

JQuery site navigation

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 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;
    });

Upvotes: 0

Views: 165

Answers (1)

dvir
dvir

Reputation: 5115

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.

Upvotes: 3

Related Questions