$(document).ready(function(){
/* Step 1 - Hide all tabbed contect except first tab content.
- Give 'active' class to first tab.
- Give 'last' class to last tab. */
$('.tabbed_content .content li').not(':first').hide();
$('.tabbed_content .tabs a:first').addClass('active');
$('.tabbed_content .tabs a:last').addClass('last');
/* Step 2 - Bind click event to tabs.
- Prevent Default event (stop page refreshing).
- Call 'switchTab' funtion. */
$('.tabbed_content .tabs li a').live('click',
function (e){
e.preventDefault();
switchTab($(this));
});
/* Step 3 - Remove 'active' class from any tabs it may be assigned to.
- Add 'active' class to the clicked tab.
- Call 'switchContent' function. */
function switchTab (objClickedTab){
strTarget = $(objClickedTab).attr('href');
$('.tabbed_content .tabs a.active').removeClass('active');
$(objClickedTab).addClass('active');
switchContent(strTarget);
}
/* Step 4 - Fade out any visible content.
- Fade in content which corresponds to clicked tab. */
function switchContent (strTarget){
$('.tabbed_content .content li:visible').fadeOut('fast', function(){
$('.tabbed_content .content li#' + strTarget).fadeIn('fast');
});
}
});