Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 3rd, 2010  |  syntax: JavaScript  |  size: 1.27 KB  |  hits: 123  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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. });