Tabslet is yet another jQuery plugin for tabs but it is a bit different from the usual ones. Why is that? First of all, the great news is that it is compatible with IE7+ and also Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0.
Tabslet also supports custom events, rotation, animations and controls.
Here are the main features of the plugin:
- Flexible HTML structure
- Custom events
- Data attribute initialization and configuration
- Controls (next, previous)
- Rotation (useful for banner rotators/carousels)
- Deep linking support
- Change tabs on mouse over
- Use animation effect for tabs’ changing
- Ability to use either href or alt attribute to target tab
- Destroy and control (next, prev, show) methods
There is a simple markup that you need to follow in order to have these tabs in your project:
Default Tabs:
<div class='tabs tabs_default'> <ul class='horizontal'> <li><a href="#tab-1">information</a></li> <li><a href="#tab-2">tab</a></li> <li><a href="#tab-3">tab</a></li> </ul> <div id='tab-1'><span>This is the default tab functionality.</span></div> <div id='tab-2'><span>Tab 2</span></div> <div id='tab-3'><span>Tab 3</span></div> </div>
Initialize the tabs:
$('.tabs').tabslet();
For more options, adjustments and examples, visit Tabslet.