enabling bookmarking while using jQuery .load();

I have a file name "project_profiles.html" which looks like this:

<div id="project1">
    <p>Project 1</p>
</div>

<div id="project2">
    <p>Project 2</p>
</div>

<div id="project3">
    <p>Project 3</p>
</div>

On my index page, I use this: $('#content').load(project_profiles.html #project1');

Then, the index page loads showing only the div with the id project 1. That's fine however, if the user tries to bookmark the page it won't work. Is there a way to make the bookmarking work while having all of the project div's in one file??

T开发者_运维问答hanks in advance....

$('#content').load(project_profiles.html #project1');
location.hash = "#project1";

Then they should be able to bookmark it. The next step is auto loading the correct content based on the location.hash if present on page load.

Edit

in your js (preferable in the $(document).ready function) place the following code

if(location.hash)
$('#content').load('/_catalogs/html/project_details.htm ' + location.hash);

and if you can without breaking anything change

<a href="#p1" onclick="$('#content').load('/_catalogs/html/project_details.htm #project1');">Read More</a>

to

<a href="#project1" onclick="$('#content').load('/_catalogs/html/project_details.htm #project1');">Read More</a>