Stylish Ajax-enabled jQuery Tabs Plugin - jTab

jTab is a lightweight jQuery tabs plugin used to create an animated & nice looking tabbed interface that has supports for AJAX content, hash tracking, custom animations and lots of APIs.

How to use it:

1. Load the latest version of jQuery JavaScript library in your webpage.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

2. Load the jQuery jTab plugin's JS and CSS after jQuery library.

<link rel="stylesheet" href="stylesheets/jtab.min.css">
<script src="javascript/jtab.jquery.min.js"></script>

3. Create the tabbed navigation & panels. You can use data-content attribute to specify an external URL you wish to embed into the tab via AJAX request.

<ul class="jtab-trigger jtab-ul">
  <li>
    <a href="#tab1">one</a>
  </li>
  <li>
    <a href="#tab2" data-content="ajax.html #content">two</a>
  </li>
  <li>
    <a href="#tab3">three</a>
  </li>
  <li>
    <a href="#tab4">four</a>
  </li>
</ul>

<div class="jtab-content-list">
  <div id="tab1" class="jtab-content">
    Content 1
  </div>
  <div id="tab2" class="jtab-content">
    Content 2
  </div>
  <div id="tab3" class="jtab-content">
    Content 3
  </div>
  <div id="tab4" class="jtab-content">
    Content 4
</div>

4. An anonymous call to the class .jtab-trigger.

$(function (){
  $('.jtab-trigger').jtab();
});

5. Options and callbacks.

// Start init tab
start: 1,

// Additional data to be ajax sent
// [boolean] or [object] 
params  false,

// Tracking browser url - hash
trackingHash  true,

// Callback init tab
callback.init: $.noop,

// Callback trigger callback function
callback.trigger  $.noop,

// Callback change tab
callback.change function (data) {},

// Callback select tab
callback.select function (data, event) {},

// Callback loading content in tab
callback.content  function (data) {},

// Callback change browser url - hash
callback.hash function (data) {},

6. Custom animations.

$('SELECTOR').jtab({
  animate: {

    open: function (obj){
      $(obj).stop().css({'opacity': 0}).show().animate({'opacity': 1}, 800);
    },

    close: function (obj){
      $(obj).stop().animate({'opacity': 0}, 800).hide();
    }
    
  }
});

Change log:

2015-12-04

• Fixed bug of change hash

---

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