1. $(document).ready(function(){
  2.  
  3. /* Step 1 - Hide all tabbed contect except first tab content.
  4.           - Give 'active' class to first tab.
  5.       - Give 'last' class to last tab. */
  6.  
  7.     $('.tabbed_content .content li').not(':first').hide();
  8.     $('.tabbed_content .tabs a:first').addClass('active');
  9.     $('.tabbed_content .tabs a:last').addClass('last');
  10.  
  11. /* Step 2 - Bind click event to tabs.
  12.           - Prevent Default event (stop page refreshing).
  13.       - Call 'switchTab' funtion. */
  14.    
  15.     $('.tabbed_content .tabs li a').live('click',
  16.         function (e){
  17.             e.preventDefault();
  18.             switchTab($(this));
  19.         });
  20.  
  21. /* Step 3 - Remove 'active' class from any tabs it may be assigned to.
  22.           - Add 'active' class to the clicked tab.
  23.           - Call 'switchContent' function. */  
  24.  
  25.     function switchTab (objClickedTab){
  26.         strTarget = $(objClickedTab).attr('href');
  27.         $('.tabbed_content .tabs a.active').removeClass('active');
  28.         $(objClickedTab).addClass('active');
  29.         switchContent(strTarget);
  30.     }
  31.  
  32. /* Step 4 - Fade out any visible content.
  33.           - Fade in content which corresponds to clicked tab. */   
  34.     function switchContent (strTarget){
  35.         $('.tabbed_content .content li:visible').fadeOut('fast', function(){
  36.             $('.tabbed_content .content li#' + strTarget).fadeIn('fast');                                                        
  37.         });
  38.     }
  39.  
  40. });