jQuery load method to load next and previous pages asynchronously

Question

I'm creating a pagination that loads pages into a div using jQuery load method. I would like to add a next and previous button that would allow users to load either the next or previous page when clicked into div "#content". I've looked into jQuery .prev() and .next() methods but I don't know how I'd incorporate those methods here to achieve my goal. Any suggestions or demos highly welcome. Thank You in advance.

//References
var sections = $("a"),
   pageBody = $("#content"); //new/prev pages load in this div

//Manage click events
sections.on('click', function () {

   //load selected section
   switch (this.id) {
   case "page-1":
      pageBody.load("page1.html");
      break;
   case "page-2":
      pageBody.load("pagee2.html");
      break;
   case "page-3":
      pageBody.load("page3.html");
      break;
   case "page-4":
      pageBody.load("page4.html");
      break;
   case "page-5":
      pageBody.load("page5.html");
      break;
   default:
      break;
   }
});

This is my HTML:

<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="page-1" href="#"></a>
         </li>
         <li>
            <a id="page-2" href="#"></a>
         </li>
         <li>
            <a id="page-3" href="#"></a>
         </li>
         <li>
            <a id="page-4" href="#"></a>
         </li>
         <li>
            <a id="page-5" href="#"></a>
         </li>
      </ul>
      <a class="next" href="#"></a>
   </div>

</div>

Answer 1

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.