jquery tabs

    <!-- This is the box that all of the tabs and contents of 
         the tabs will reside -->
    <div id="tabs_container">
      
      <!-- These are the tabs -->
      <ul class="tabs">
        <li class="active">
          <a href="#" rel="#tab_1_contents" class="tab">Tab 1</a>
        </li>
        <li><a href="#" rel="#tab_2_contents" class="tab">Tab 2</a></li>
        <li><a href="#" rel="#tab_3_contents" class="tab">Tab 3</a></li>
      </ul>
      
      <!-- This is used so the contents don't appear to the 
           right of the tabs -->
      <div class="clear"></div>
      
      <!-- This is a div that hold all the tabbed contents -->
      <div class="tab_contents_container">
    
        <!-- Tab 1 Contents -->
        <div id="tab_1_contents" class="tab_contents tab_contents_active">
          I'm Good Enough!
        </div>
    
        <!-- Tab 2 Contents -->
        <div id="tab_2_contents" class="tab_contents">
          I'm Smart Enough!
        </div>
    
        <!-- Tab 3 Contents -->
        <div id="tab_3_contents" class="tab_contents">
          And Doggone It, People Like Me!
        </div>
    
      </div>
    </div>

// Load this script when page loads
$(document).ready(function(){

 // Set up a listener so that when anything with a class of 'tab' 
 // is clicked, this function is run.
 $('.tab').click(function () {

  // Remove the 'active' class from the active tab.
  $('#tabs_container > .tabs > li.active')
	  .removeClass('active');
	  
  // Add the 'active' class to the clicked tab.
  $(this).parent().addClass('active');

  // Remove the 'tab_contents_active' class from the visible tab contents.
  $('#tabs_container > .tab_contents_container > div.tab_contents_active')
	  .removeClass('tab_contents_active');

  // Add the 'tab_contents_active' class to the associated tab contents.
  $(this.rel).addClass('tab_contents_active');

 });
});