Если нравится ООП подход:
<nav>
<ul id="menu">
<li><a href="a.html" class="nav-cell nav-cell-active">Бла бла</a></li>
<li><a href="b.html" class="nav-cell">Бла бла</a></li>
</ul>
</nav>
<main id="content"></main>
<script>
function Menu(menuElement, contentElement, linkClass, activeClass) {
var links = menuElement.querySelectorAll('.' + linkClass);
var activeLink = menuElement.querySelector('.' + activeClass);
var menu = this;
var onclick = function() {
menu.activateLink(this);
return false;
};
for (var i = 0; i < links.length; i++) {
links[i].onclick = onclick;
}
this.links = links;
this.activeLink = activeLink;
this.activeClass = activeClass;
this.contentElement = contentElement;
}
Menu.prototype.activateLink = function(link) {
var request = new XMLHttpRequest();
request.open('GET', link.href);
var menu = this;
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
menu.displayContent(request.responseText);
} else {
menu.displayContent(menu.errorMessage);
}
}
};
request.send(null);
this.activeLink.className = this.activeLink.className.replace(new RegExp('\\s*' + this.activeClass), '');
this.activeLink = link;
this.activeLink.className += this.activeClass;
};
Menu.prototype.displayContent = function(content) {
this.contentElement.innerHTML = content;
};
Menu.prototype.errorMessage = '<b>Ошибка при загрузке</b>';
var menu = document.querySelector('#menu');
var content = document.querySelector('#content');
new Menu(menu, content, 'nav-cell', 'nav-cell-active');
</script>