Easy & Animated jQuery Tabbed Content Plugin - Tabulous

Tabulous is a simple and clean jQuery plugin that enables you to organize DIV contents into an animated tab interface with awesome CSS3 animations.

You might also like:

• Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
• Tabbed Content Slider Plugin with jQuery and XML - tNews
• Google Play Tabbed Navigation with jQuery and CSS3
• Simple jQuery Tab Navigation Menu Plugin - simpleTab
• Android-Like jQuery Tab Navigation Plugin - ShiftyNav
• Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent

How to use it:

1. Include jQuery Tabulous CSS in the head section

<link href='tabulous.css' rel='stylesheet' type='text/css'>

2. Markup html structure

<div id="tabs">

<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>

<div id="tabs_container">
<div id="tabs-1">
...
</div>
<div id="tabs-2">
...
</div>
</div>

</div>

3. Include jQuery library and jQuery Tabulous plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript" src="tabulous.js"></script> 

4. Call the plugin with options

$(document).ready(function($) {
   
$('#tabs').tabulous({
effect: 'scale' // scale, slideLeft, scaleUp or flip
});

});

Change logs:

2015-02-20

• update

2014-11-29

• solving selection issue for active tab content

---

This awesome jQuery plugin is developed by aarondo. For more Advanced Usages, please check the demo page or visit the official website.