Open first sub tab by default

Open first sub tab by default

I'm having a very hard time with this. 
I'm trying to make nested tabs that can later be used with AJAX. Everything seems to work but this:
If you click Main Tab B, then Subtab 2
Then click Main Tab A, and go back to Main Tab B - Subtab 2 is still open.
I need the default sub tab for each main tab to be the first one. 

IMPORTANT : I'm almost 100% positive that the problem lies in this line of code in the subTabs function.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>

  5. <title>Subtabs & Ajax</title>

  7. <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
  8. <link rel="stylesheet" type="text/css" href="styles.css" />
  9.     
  10. </head>
  11. <body>
  12. <div style="width: 100%; text-align: center;">
  13. <div class="wrap">

  15.  <!-- Parent Tabs -->   
  16. <ul id="mainTabs" class="tabs" style="border-style: none;">
  17.     <li><a href="#pageA1">Main A</a></li>
  18.     <li><a href="#pageB1">Main B</a></li>
  19.   </ul>
  20.  <div style="height: 11px;"></div>

  22.  <!-- Subtabs -->  
  23.     
  24. <div class="pane">
  25. <p>Main A</p>

  27. <ul id="subTabs" class="tabs">
  28.   <li><a href="#pageA1">Subtab 1</a></li>
  29.   <li><a href="#pageA2">Subtab 2</a></li>
  30. </ul>


  33. <div class="pane">
  34. <h3>First Tab Content </h3 ><br> 
  35. <div class="initTab" class="content" style="width:400px; height: 400px; background-color: #CCC;"></div>
  36. </div>

  38. <div class="pane">
  39. <h3>Second tab content</h3 ><br>
  40. <div class="content" style="width:400px; height: 400px; background-color: #CCC;"></div>
  41. </div>
  42. </div>

  44. <div class="pane">
  45. <p>Main B</p>

  47. <ul id="subTabs" class="tabs">
  48.   <li><a href="#pageB1">Subtab 1</a></li>
  49.   <li><a href="#pageB2">Subtab 2</a></li>
  50. </ul>

  52. <div class="pane"><h3>First tab content.</h3 ><br>
  53. <div class="content" style="width:400px; height: 400px; background-color: #CCC;">
  54. </div>
  55. </div>

  57. <div class="pane"><h3>Second tab content</h3 > <br>
  58. <div class="content" style="width:400px; height: 400px; background-color: #CCC;">
  59. </div>
  60. </div>
  61. </div>

  63. <br>
  64.  
  65.         </div> </div>
  66. </div>

  68. <script>
  69.   // perform JavaScript after the document is scriptable.
  70.  $(document).ready(function(){
  71.      $(".initTab").load("pageA1.txt"); //Load ajax for initial tab when site first opens
  72.      subTabs(); //Load subtabs when main tab is clicked
  73.      loadAjax(); //Load ajax content when sub tab is clicked

  75.     });

  77. function subTabs(){ //Subtab page area
  78.      $("ul.tabs").tabs("> .pane");
  79.  }
  80. function loadAjax(){
  81.     $(".tabs a").click(function(){
  82.         var page = this.hash.substring(1); //Remove Hash from href
  83.         $(".content").load(page+".txt"); //Load .txt file corresponding to href
  84.     });

  86. }
  87.     
  88. </script>

  90. </body>
  91. </html>