Tabslet – a jQuery plugin for tabs

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();

DEMOS DOWNLOAD

For more options, adjustments and examples, visit Tabslet.