Question

When you visit http://www.rdio.com/#/aboutus/ for instance you will see that their about us page loads, now when you hover over or inspect the “About Us” link in their footer, it simply points to /aboutus. I have also checked View Source and there is strictly no magic occuring on the link itself.

I am thinking jQuery must update all their <A> elements and replace with the anchor based hash tag url approach.

How would I get this to function in my own project?

Thanks.

Answer 1

The anchors are there for linking; the real magic is Ajax and other dynamic JavaScript-based content. Here’s what the link might look like:

$('.some-link').click(function(e) {
    // Allow for linking:
    window.location.hash = '#/' + this.getAttribute('href');

    // Start loading the content:
    $.ajax({
        // ...
        success: function() {
            // New content gets put in
        }
    });

    // Prevent the real link from being followed:
    e.preventDefault();
});