Tabs - jQuery plugin for accessible, unobtrusive tabs
        
            Read more about it.
            To enable history support for Tabs I use my History/Remote plugin.
        
        Simple Tabs
        
            
            
                First tab is active by default:
                $('#container').tabs();
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Start With Custom Tab
        
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Second tab is active:
                $('#container').tabs(2);
                
                    Two alternative ways to specify the active tab will overrule this argument. First a li element
                    (representing one single tab) belonging to the selected tab class, e.g. set the selected tab
                    class (default: "tabs-selected", see option selectedClass) for one of the unordered li elements
                    in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers
                    to the id of a tab container of a tab interface the corresponding tab will  be activated and both
                    the initial argument as well as an eventually declared class attribute will be overruled.
                
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Slide Effect
        
            
            
                
                    Use a slide effect to switch tabs.
                    You can optionally specify the speed for the animation with the option fxSpeed: value.
                    The value is either a string of one of the predefined speeds in jQuery (slow,
                    normal, fast) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to normal.
                
                $('#container').tabs({ fxSlide: true });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Fade Effect
        
            
            
                
                    Use a fade effect to switch tabs.
                    You can optionally specify the speed for the animation with the option fxSpeed: value.
                    The value is either a string of one of the predefined speeds in jQuery (slow,
                    normal, fast) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to normal.
                
                $('#container').tabs({ fxFade: true, fxSpeed: 'fast' });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Slide and Fade Effect Combined
        
            
            
                Use a combined slide and fade effect to switch tabs:
                $('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Callbacks
        
            
            
                
                    Define callback functions that are invoked at different points in time during the tab switch process.
                    These functions are invoked with three arguments: the first one being the clicked tab (the
                    a element), the second one being the div element that holds the content of
                    the clicked tab and the third one being the div element belonging to the tab that gets hidden.
                    
                    If the onClick callback returns false, the tab switch is canceled. This is especially useful if switching
                    tabs requires form validation before for example.
                
                $('#container').tabs({
    fxFade: true,
    fxSpeed: 'fast',
    onClick: function() {
        alert('onClick');
    },
    onHide: function() {
        alert('onHide');
    },
    onShow: function() {
        alert('onShow');
    }
});
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Automatic height
        
            
            
                Adjust height of all tabs to the largest:
                $('#container').tabs({ fxAutoHeight: true });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Custom animation
        
            
            
                Define your own custom animation:
                $('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Ajax tabs
        
        Custom HTML structure
        
            
            
                
                    
                        If some HTML structure is required that differs from the default one, attach the classes
                        tabs-nav to the unordered list, respectively tabs-container to each container
                        and let the plugin automatically find the required elements by class.
                    
                 
                
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                
                
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                
             
         
        Triggering, disabling, enabling Tabs
        
            
            
                $('#container').enableTab(3); // enables third tab
$('#container').triggerTab(3); // triggers third tab
$('#container').disableTab(3); // disables third tab
                
                    One or more tabs can also be disabled immediatly by simply setting the disabling class for the li element
                    representing that particular tab or by using the disabled option.
                
                <li class="tabs-disabled">…</li>
$('#container').tabs({ disabled: [2, 3] });
             
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            
         
        Changelog (since release of Version 2)
        
            - 
                2.7 - A few frequently requested enhancements and bugfixes.
            
- 
                2.6 - Added option for loading tab content via Ajax: remote: true
- 
                2.5.2 - Avoid flicker (in Firefox) for simple tab switching without animation.
            
- 
                2.5.1 - Added support for hiding tab content before tabs initialization to avoid flash of content, fixed little flaw in history support, jQuery 1.1 ready.
- 
                2.5 - Added support for disabling/enabling tabs. Disabling tab(s): via option like disabled: [2, 3]immediatly, else via$(…).disableTab(3);. Enabling:$(…)enableTab(3);.
                A disabled tab is greyed out (using a configurable CSS class,
                optiondisabledClass) and isn't clickable.
- 
                2.4 - New option: bookmarkable, extended callback system:onClick,onHide,onShow(onShowreplaces formercallbackoption)
- 
                2.2 - Improved fxAutoHeightoption to take window and text resizing into account (wasfxAutoheight)
- 2.1 - Tabs version 2 released
Tested with
        
            - Firefox 2.0
- Firefox 1.5
- Firefox 1.0
- Opera 9.01
- Opera 8.52
- Safari 2.0.4
- IE 7
- IE 6