I am very close to what I am attempting to accomplish, but I have two issues (that I know of):
If the user navigates away to another site (either forward or back buttons), and then comes back, the last "state" is not properly registered in the history, but any previous "states" are properly added.
The Div layers do not show in Firefox, unless using the forward or back navigation. Clicking to show a Div layer, you can see if for a split second, then it disappears.
HTML/JavaScript code:
<html>
<head>
<title>Test Nav</title>
<script language="JavaScript">
function clicked(divID) {
document.getElementById('divOne').style.display = 'none';
document.getElementById('divTwo').style.display = 'none';
document.getElementById(divID).style.display = 'block';
data = divID || null;
history.pushState(data,'Test','\Test04.html');
return event.preventDefault();
}
function updateContent(data) {
document.getElementById('divOne').style.display = 'none';
document.getElementById('divTwo').style.display = 'none';
document.getElementById(data).style.display = 'block';
window.alert(data);
}
window.addEventListener('popstate', function(event) {
updateContent(event.state);
});
history.replaceState(data, 'Test','\Test04.html');
</script>
</head>
<body>
<nav>
<ul class="cf">
<li><a href="#DivOne" onclick="clicked('divOne')">Div One</a></li>
<li><a href="#DivTwo" onclick="clicked('divTwo')">Div Two</a></li>
</ul>
</nav>
<div id="divOne" style="display: none">
This is Div One
</div>
<div id="divTwo" style="display: none">
This is Div Two
</div>
</body>
</html>