Easy & Animated jQuery Tabbed Content Plugin - Tabulous

File Size: 10.8 KB
Views Total: 13532
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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

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.