function addNormalClass() {
this.className = 'normal';
}

function highlightTarget() {
// Collect the relevant items:
var contentsArticles = document.getElementById('articles').getElementsByTagName('p');
// Loop through them:
for (var j=0;j<contentsArticles.length;j++) {
if (contentsArticles[j].className == 'highlighted') {
// If one of them has a class name of 'highlighted,' change it to 'normal':
contentsArticles[j].className = 'normal';
}
}

// What is the url of the clicked link?
var url = this.href;
// Get everything after the '#' in the link--that's our id
var elementId = url.substring(url.lastIndexOf('#') + 1);
// Get the element:
var currentTarget = document.getElementById(elementId);
// Change its classname:
currentTarget.className = 'highlighted';
}

function buildContentsArray() {
// First collect all the links to contents and the contents they link to:
var contentsLinks = document.getElementById('contents').getElementsByTagName('a');
var contentsArticles = document.getElementById('articles').getElementsByTagName('p');

// Loop through the links:
for (var i=0;i<contentsLinks.length;i++) {
// Call a function when the links are clicked AND when a highlighted article is clicked:
contentsLinks[i].onclick = highlightTarget;
contentsArticles[i].onclick = addNormalClass;
}
}

window.onload = buildContentsArray;