Converting a javascript nav bar to use ajax?

Question

Hi folks, I may be in over my head, here but I'm in my dev folder so no harm :-D OK. I'd like to start converting over these four tabbed navigation buttons to open content with ajax insted. Without worrying about the content that will open, how do I alter this nav bar to work with ajax?

Currently, the navigation section is this:

echo "<table class='navtabs' cellpadding='0' cellspacing='0'>";
echo "<tr><td class='right'>";
echo buildMenuNavigation($currentPageIndex);
echo '</td></tr></table>';

And that function is this:

function buildMenuNavigation($currentIndex=0) {

  $navtabs = array(
  '0'=>array('Monthly'=>'index.php'),
  '1'=>array('Daily'=>'agenda.php'),
  '2'=>array('Admin'=>'admin/view-timelines.php'),
  '3'=>array('Help'=>'help.php'),
  );

  $sep = '<li>&nbsp;|&nbsp;</li>';$builtNav=array();
  foreach($navtabs as $index=>$tablinks) {  
    foreach($tablinks as $key=>$value)  {
      $class='';
      if($index==$currentIndex) {
        $class=' class="selected"';
      }
      //pr($value);
      $builtNav[] = '<li><a href="' . SITE_URL . '/' . $value.'"' . $class .'>&nbsp;'.$key.'&nbsp;</a></li>';
    }
  }
    return '<ul>' . implode($sep,$builtNav) . '</ul>';
}

Now that is a pretty complex way to build a navigation bar-I'm wondering am I better off changing this to standard unordered list with links and then doing the ajax, or building on this?