jQuery Tabs Plugin

<ul class="demo tabs">
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>
<div class="panes">
    <div>panes</div>
    <div>panle2</div>
    <div>panle3</div>
</div>

$(".demo").tabs({panes: '.panes'});

$(".demo").tabs({
        namespace: 'tabs',  // namespace for css class
        panes: '.panes',
        skin: null,         // set custom skin
        initialIndex: 0,    // set initial index when first open
        effect: 'fade',     // set transition effect
        ajax: false,        // open ajax load function
        cached: false,      // if true, cach ajax load content after first loaded
        history: false,     // open history state function
        keyboard: false,    // keyboard navigation
        event: 'click'      // change index use 'click' or 'mouseover'
});

// active index
$(".demo").tabs("active", index);

// get all tabs element
$(".demo").tabs("getTabs");

// get all panes element
$(".demo").tabs("getPanes");

// get current index, start from 0
$(".demo").tabs("getIndex");

// get current pane element
$(".demo").tabs("getCurrentPane");

// get current tab elemnt
$(".demo").tabs("getCurrentTab");

// goto the next tab, the last will goto the first
$(".demo").tabs("next");

// goto the prevous tab, the first will goto the last
$(".demo").tabs("prev");

// remove tabs Dom element and unbound all events
$(".demo").tabs("destroy");

$(document).on('tabs::init', function(event,instance) {
    // instance means current tabs instance 
    // some stuff
});