Tabit

README.markdown

Tabit

The God's easiest way to create tab-based interface.

Example

$(function(){
  $('#example').tabit();
});

And…

    <div id="example">
      <ul class="tabs">
        <li class="default"><a href="#t1">OMG</a></li>
        <li><a href="#t2">LOL</a></li>
        <li><a href="#t3">OMFG</a></li>
      </ul>
      <div id="t1" class="tab-content default">
        OMG
      </div>
      <div id="t2" class="tab-content">
        LOL
      </div>
      <div id="t3" class="tab-content">
        OMFG
      </div>
    </div>

Yes, that easy. Grab the code below.

tabit.js

jQuery.fn.tabit = function (){
  var tabs_content = $('.tab-content', this);
  var tabs = $('.tabs li', this);
  tabs_content.hide();
  $('.tab-content.default', this).show();
  $('.tabs li.default', this).addClass('active');
  $('.tabs a', this).click(function(){
    var target = $(this).attr('href');
    tabs_content.hide();
    $(target).show();
    tabs.removeClass('active');
    $(this).parent().addClass('active');
    return false;
  });
};