ajax removeclass,shopify - addClass/removeClass after AJAX call - Stack Overflow

I have a navigation that loads content into a specific element on the page via AJAX:

• page 1
• page 2
• page 3

The following snippet makes that happen:

$('ul.main-nav-child a').bind('click', function(e) {

var url = $(this).attr('href');

$(".main-content").load(url + " .product-grid-collection");

e.preventDefault(); // stop the browser from following the link

});

My question is this: How can I update the URL in the browser to reflect the link that's been clicked and also addClass of .active to that link (and removeClass from the previous active link), without refreshing the page?

UPDATE: So I've now managed to get the URL to change when a link's clicked, I just need to addClass of .active to each link when clicked and removeClass .active for the previous link.

Here's my updated code:

$('ul.main-nav-child a').bind('click', function(e) {

var url = $(this).attr('href');

$(".main-content").load(url + " .product-grid-collection");

e.preventDefault(); // stop the browser from following the link

var stateObj = { foo: "bar" };

history.pushState(stateObj, "", url);

});

Any help/advice is greatly appreciated.