Change the markup to
<div id="content">
<h2>Page TITLE</h2>
<p>Page Text Goes Here</p>
<div>
<a class="prev" href="#"></a>
<ul class="nav">
<li><a id="page1" href="#"></a></li>
<li><a id="page2" href="#"></a></li>
<li><a id="page3" href="#"></a></li>
<li><a id="page4" href="#"></a></li>
<li><a id="page5" href="#"></a></li>
</ul>
<a class="next" href="#"></a>
</div>
</div>
and use something like this
var sections = $(".nav a");
sections.on('click', function () {
$("#content").load(this.id + '.html');
sections.removeClass('active');
$(this).addClass('active');
});
$('.next').on('click', function() {
var idx = sections.index( sections.filter('.active') ) + 1;
idx = idx > sections.length-1 ? 0 : idx;
sections.eq(idx).trigger('click');
});
$('.prev').on('click', function() {
var idx = sections.index( sections.filter('.active') ) - 1;
idx = idx < 0 ? sections.length-1 : idx;
sections.eq(idx).trigger('click');
});
it increments the index and gets the next / previous element etc.