Stylish Ajax-enabled jQuery Tabs Plugin - jTab

File Size: 22.8 KB
Views Total: 3816
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">
    <a href="#tab1">one</a>
    <a href="#tab2" data-content="ajax.html #content">two</a>
    <a href="#tab3">three</a>
    <a href="#tab4">four</a>

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

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

$(function (){

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 function (data, event) {},

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

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

6. Custom animations.

  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:


  • 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.