Elegant Animated Tabs Plugin For jQuery - colorfulTab

colorfulTab is a simple jQuery plugin that enables you to organize your long content in an elegant, animated, themeable tabbed interface with custom colors, overlays and background images.

How to use it:

1. Include the colorfulTab.min.css in the header, and the colorfulTab.min.js after jQuery library but before the closing body tag.

<link rel="stylesheet" href="css/colorfulTab.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/colorfulTab.min.js"></script>

2. The required html structure for the tabbed interface. You can specify the colors for each tab using tab-color attribute.

<div class="colorful-tab-wrapper" id="colorful">
  <ul class="colorful-tab-menu">
    <li class="colorful-tab-menu-item active" tab-color="#00A566"><a href="#clr-0">Tab 1</a></li>
    <li class="colorful-tab-menu-item" tab-color="#8021D3"><a href="#clr-1">Tab 2</a></li>
    <li class="colorful-tab-menu-item" tab-color="#C9003C"><a href="#clr-2">Tab 3</a></li>
  </ul>
  <div class="colorful-tab-container">  
    <div class="colorful-tab-content active" id="clr-0">  
      <p>Tab Content 1</p>
    </div>
    <div class="colorful-tab-content" id="clr-1"> 
      <p>Tab Content 2</p>
    </div>
    <div class="colorful-tab-content" id="clr-2"> 
      <p>Tab Content 3</p>
    </div>
  </div>
</div>

3. To add backgrounds to your tabs, just the paths to your background images using tab-background attribute.

<ul class="colorful-tab-menu">
  <li class="colorful-tab-menu-item active" tab-background="1.jpg"><a href="#clr-0">Tab 1</a></li>
  <li class="colorful-tab-menu-item" tab-background="2.jpg"><a href="#clr-1">Tab 2</a></li>
  <li class="colorful-tab-menu-item" tab-background="3.jpg"><a href="#clr-2">Tab 3</a></li>
</ul>

4. Call the function on the top container to initialize the tabs plugin.

$('#colorful').colorfulTab();

5. Change the default theme.

$('#colorful').colorfulTab({
  // 'elliptic', 'flatline'
  theme: '',
});

6. Customize the overlay.

$('#colorful').colorfulTab({
  overlayColor: "#000",
  overlayOpacity: ".6"
});

---

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