jQuery Tabbed Content (NOOB)

jQuery Tabbed Content (NOOB)

NOOB here all... very new to jQuery.

i borrowed a script that works with CSS to create a tabbed content menu.
here is the script:
$(document).ready(function(){
   $('ul.tabNav a').click(function() {
      var curChildIndex = $(this).parent().prevAll().length + 1;
      $(this).parent().parent().children('.current').removeClass('current');
      $(this).parent().addClass('current');
      $(this).parent().parent().next('.tabContainer').children('.current').fadeOut('fast',function() {
         $(this).removeClass('current');
         $(this).parent().children('div:nth-child('+curChildIndex+')').fadeIn('normal',function() {
            $(this).addClass('current');
         });
      });
      return false;
   });
});


and here is the css:

/* TABBED MENU */
div#maintabcontainer { margin:0; width: 758px; height:600px; }
ul.tabNav { float: left; list-style: none; height:40px; width:760px ; margin:0; padding:0; background:url(/_images/tab-bg.gif) repeat-x; font-weight:bold;}
ul.tabNav li { float: left; margin: 0 3px 0 0; padding:0; background:url(/_images/tab-sep.gif) no-repeat right center;}
ul.tabNav li.current { padding-top: 0; }
ul.tabNav a { color: #363636; display: block; padding: 8px; text-decoration: none; text-transform:uppercase;}
ul.tabNav li.current a {color:#0068b3; text-transform:uppercase; padding: 8px; background:url(/_images/tab-triangle.gif) no-repeat top center;}

div.tabContainer { clear: both; float: left; width: 100%; margin:0; border: 1px solid #c6c1b8; }
div.tabContainer h1{color:#f3f1ed; font-family:Palatino,Georgia,Times New Roman,serif; text-transform:uppercase; font-size:2.5em; margin:0; padding:0;}
div.tabContainer div.tab1 { border: 10px solid #fff; display: none; padding: 10px; height:330px;}
div.tabContainer div.tab2 { border: 10px solid #fff; display: none; padding: 10px; height:330px;}
div.tabContainer div.tab3 { border: 10px solid #fff; display: none; padding: 10px; height:330px;}
div.tabContainer div.tab4 { border: 10px solid #fff; display: none; padding: 10px; height:330px;}
div.tabContainer div.tab5 { border: 10px solid #fff; display: none; padding: 10px; height:330px;}
div.tabContainer div.current { display: block; }
div.tabContainer div.copy{height:80px; margin:260px 0 0 0; color:#fff;}
div.tabContainer div.copy a{color:#fff;}
div.tabContainer div.copy p{padding:0 0 0 50px; margin:0;}
div.tab p:last-child { margin-bottom: 0; }


and here is the HTML:

<div id="maintabcontainer">
   
<ul class="tabNav">
      <li class="current"><a href="#">{iw_value name='dcr.main.tab_title'/}</a></li>
      <li><a href="#">{iw_value name='dcr.main2.tab_title'/}</a></li>
      <li><a href="#">{iw_value name='dcr.main3.tab_title'/}</a></li>
      <li><a href="#">{iw_value name='dcr.main4.tab_title'/}</a></li>
      <li><a href="#">{iw_value name='dcr.main5.tab_title'/}</a></li>
   </ul>


<div class="tabContainer">
   <div class="tab1 current" style="background:#fff url({iw_value name='dcr.main.tab_bg'/}) no-repeat top left;">
      <div class="copy">
         <h1>{iw_value name='dcr.main.tab_headline'/}</h1>
         {iw_value name='dcr.main.tab_text'/}         
      </div>
   </div>
   
   <div class="tab2" style="background:#fff url({iw_value name='dcr.main2.tab_bg'/}) no-repeat top left;">
      <div class="copy">
         <h1>{iw_value name='dcr.main2.tab_headline'/}</h1>
         {iw_value name='dcr.main2.tab_text'/}
      </div>
   </div>

   <div class="tab2" style="background:#fff url({iw_value name='dcr.main3.tab_bg'/}) no-repeat top left;">
      <div class="copy">
         <h1>{iw_value name='dcr.main3.tab_headline'/}</h1>
         {iw_value name='dcr.main3.tab_text'/}
      </div>
   </div>

   <div class="tab2" style="background:#fff url({iw_value name='dcr.main4.tab_bg'/}) no-repeat top left;">
      <div class="copy">
         <h1>{iw_value name='dcr.main4.tab_headline'/}</h1>
         {iw_value name='dcr.main4.tab_text'/}
      </div>
   </div>

   <div class="tab2" style="background:#fff url({iw_value name='dcr.main5.tab_bg'/}) no-repeat top left;">
      <div class="copy">
         <h1>{iw_value name='dcr.main5.tab_headline'/}</h1>
         {iw_value name='dcr.main5.tab_text'/}
      </div>
   </div>




</div><!--/tabContainer-->
   






</div><!--/maintabcontainer-->


what i am trying to do is put the UL class="tabNav" under the content. the creator said it can be done, but the script needs to be modified based on the DOM...

but have tried several ideas but just keep killing the script...

can anyone give me a tip, or maybe a lead on what i need to be doing.

thanks