jQuery Plugin For Simple Nice Tab Slider - TabIt

TabIt is a small, simple jQuery plugin for transforming selected elements into a nice tab slider which allows you to navigate between content slides with tabs.

How to use it:

1. Add jQuery library and the jQuery tabit plugin to your html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>    
<script src="plugin.tabit.js"></script>

2. Wrap your html content into the DIV elements. data-tab-title attribute is used to specify the name of the tabs.

<div class="demo" data-tab-title="First Tab">
  ... Content 1 ...
</div>

<div class="demo" data-tab-title="Second Tab">
  ... Content 2 ...
</div>

<div class="demo" data-tab-title="Third Tab">
  ... Content 3 ...
</div>

...

3. Call the plugin with default settings.

$(".demo").tabIt();

4. Style the tab slider in the CSS.

.wrap-tabs,
.wrap-tab-contents {
  width: 100%;
  float: left;
}

.tabs .tab {
  float: left;
  padding: 5px;
  margin: 0 10px 10px 0;
  border-bottom: 3px solid #eee;
  color: #aaa;
}

.tabs .tab:hover {
  cursor: pointer;
  border-bottom: 3px solid #aaa;
  color: #000;
}

.tabs .tab-active,
.tabs .tab-active:hover {
  color: #000;
  border-bottom: 3px solid #6C9;
}

.tab-contents { position: relative; }

5. General settings.

$(".demo").tabIt({

// Default function to get the label for tab section
get_tab_label : getTabLabel,

// data attribute to get the tab label
tab_label_attr : "data-tab-title",

// fly, fade or none
open_tab_animation : "fly", 

// animation duration in ms
animation_duration : 300,

// If tab to be opened is defined in the settings, open this tab
// Otherwise open first tab
auto_open_tab : null

});

Change log:

2015-12-12

• ADD sliding actions to tabs when screen/wrapper is too small to fit all tabs
• FIX mobile browser issues

---

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