I wouldn’t use css to hide the container, because then you see nothing when javascript is not available.
Here’s some sample HTML content:
<ul id="nav">
<li><a href="#poster">Poster</a></li>
<li><a href="#writing">Writing</a></li>
</ul>
<div id="poster">
A poster is shown here.
</div>
<div id="writing">
Some writing is shown here.
</div>
When the page loads, you’re going to want to do several things.
- hide the sections that are linked to from the navigation
- If the location bar links to a section, show that one section
- capture clicks in the navigation so that you can hide other sections and show the clicked section
window.onload = function () {
var sectionId = 'nav';
hideLinkedSections(sectionId);
if (location.hash) {
showLinkedSection(location.hash);
}
document.getElementById(sectionId).onclick = handleSectionClicks;
}
Here’s how you can hide all of the sections:
function hideLinkedSections(sourceId) {
var nav = document.getElementById(sourceId),
i,
links = nav.getElementsByTagName('a'),
id;
for (i = 0; i < links.length; i += 1) {
id = links[i].href.split('#')[1];
if (document.getElementById(id)) {
document.getElementById(id).style.display = 'none';
}
}
}
When showing a section, because it could be ‘#poster’ from the location bar, or from a links href value, the function should accept that hash value and process things from there.
function showLinkedSection(hash) {
var id = hash.split('#')[1];
document.getElementById(id).style.display = '';
}
With the click handler, the top two thirds of it is just making sure that the click occurred on a linked element.
function handleSectionClicks(evt) {
evt = evt || window.event;
var targ = evt.target || evt.secElement;
if (targ.nodeType === 3) {
targ = targ.parentNode;
}
if (targ.nodeType === 1 && targ.nodeName === 'A') {
hideLinkedSections(this.id);
showLinkedSection(targ.href);
}
}
Here’s a sample test page that you can use to play around with things.
Please keep in mind that the script code really should be saved out to an external file, such as js/script.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test page</title>
<body>
<ul id="nav">
<li><a href="#poster">Poster</a></li>
<li><a href="#writing">Writing</a></li>
</ul>
<div id="poster">
A poster is shown here.
</div>
<div id="writing">
Some writing is shown here.
</div>
<script type="text/javascript">
function hideLinkedSections(sourceId) {
var nav = document.getElementById(sourceId),
i,
links = nav.getElementsByTagName('a'),
id;
for (i = 0; i < links.length; i += 1) {
id = links[i].href.split('#')[1];
if (document.getElementById(id)) {
document.getElementById(id).style.display = 'none';
}
}
}
function showLinkedSection(hash) {
var id = hash.split('#')[1];
document.getElementById(id).style.display = '';
}
function handleSectionClicks(evt) {
evt = evt || window.event;
var targ = evt.target || evt.secElement;
if (targ.nodeType === 3) {
targ = targ.parentNode;
}
if (targ.nodeType === 1 && targ.nodeName === 'A') {
hideLinkedSections(this.id);
showLinkedSection(targ.href);
}
}
window.onload = function () {
var sectionId = 'nav';
hideLinkedSections(sectionId);
document.getElementById(sectionId).onclick = handleSectionClicks;
if (location.hash) {
showLinkedSection(location.hash);
}
}
</script>
</body>
</html>
