I don't think that is possible in the way you explained. It requires Ajax :
• 4 HTML pages (index.html, about.html, and so on)
• Ajax only load the content of each page, on demand, and you can handle URL with pushstate, so you can have a navigation that doesn't reload the browser
• Google can crawl each HTML page without JS consideration
Why your solution won't work ?
• Google will crawl the whole index page (regardless of which content should be displayed)
Note that I'm not SEO expert, just giving my point of view (technical :) ).
Without AJAX :
• Implement your content as JS variables or objects in an external JS file :
about = {
title:"My page title",
content:"My page content",
url:"/about/"
};
• make your js file hidden from search engines :
User-agent: *
Disallow: /js/main.js
• make the calls to implement the new content whatever the page you click on :
$('nav a').click(function(){
var href = $(this).attr('href'); // be sure the href of the a element has the same name as the JS object
$('h1.title').text(href.title);
$('p.content').text(href.content);
history.replaceState(page: href.url,href.title,href.url);
});
Not sure the JS part will work as I didn't test it.