changing the url without loading a new page

For my single page website, I have an index of projects. If a project is clicked it opens up a slideshow on the same page. So basically, I only have one URL, and if anyone wants to link to a specific project, they can't.

I'm trying to make it so that if I click on a project, it changes the URL. And so that URL can be used to get to my website with that project opened.

Here is a link to what I have so far.

For reference, I'm trying to achieve something that is found on this site.

I found some good suggestions here, but what happens when I use something like this (below), a new URL is created but it doesn't open up the project if I renter that URL into the browser.

<a href="#" id='click'>Click to change url to bar.html</a>

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>