Skip to content

Instantly share code, notes, and snippets.

@rnmp
Created May 6, 2011 15:07
Show Gist options
  • Save rnmp/959107 to your computer and use it in GitHub Desktop.
Save rnmp/959107 to your computer and use it in GitHub Desktop.
Tabit

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.

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;
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment