Jquery-Ui-Tab-Next-Prev

Before we begin with this tutorial, I will quickly jot down the JavaScript files we will be needing to get this working,

STEP 1 JQUERY UI TAB WITHOUT PREV/NEXT FUNCTIONALITY : Fiddle it !

Jquery-Ui-Tab

Html: Fiddle it !

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1 Header</a></li>
    <li><a href="#tabs-2">Tab 2 Header</a></li>
    <li><a href="#tabs-3">Tab 3 Header</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab1 content.</p>
  </div>
  <div id="tabs-2">
    <p>Tab2 content.</p>
  </div>
  <div id="tabs-3">
    <p>Tab3 content.</p>
  </div>
</div>        

Jquery Fiddle it !

$(document).ready(function(){
    $("#tabs").tabs();
});    

STEP 2 JQUERY UI TAB WITH PREV/NEXT FUNCTIONALITY : Fiddle it !

Jquery-Ui-Tab-Next-Prev

Html: Fiddle it !

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1 Header</a></li>
    <li><a href="#tabs-2">Tab 2 Header</a></li>
    <li><a href="#tabs-3">Tab 3 Header</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab1 content.</p>
  </div>
  <div id="tabs-2">
    <p>Tab2 content.</p>
  </div>
  <div id="tabs-3">
    <p>Tab3 content.</p>
  </div>

    <input type="button" class="btn btn-primary" id="prevBtn" value="Prev" />
    <input type="button" class="btn btn-primary" id="nextBtn" value="Next" />

</div>    

Css: Fiddle it !

#prevBtn { display:none;}    

Jquery: Fiddle it !

$(document).ready(function(){
    $("#tabs").tabs();

    $("#prevBtn").bind("click", prevOfferTab);
    $("#nextBtn").bind("click", nextOfferTab);
});

function getSelectedTabIndex(change)  {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected') + change;    
    if (selected == 0) {
        $("#prevBtn").hide();
    }
    else {
        $("#prevBtn").show();
    }

    var tabsCount = this.$('#tabs').tabs('length') -1;
    if (selected == tabsCount) {
        $("#nextBtn").hide();
    }
    else {
        $("#nextBtn").show();
    }    
    return selected;
}

function nextOfferTab()  {
    var newTabIndex = parseInt(getSelectedTabIndex(1));
    $('#tabs').tabs('select', newTabIndex);
}

function prevOfferTab()  {
    var newTabIndex = parseInt(getSelectedTabIndex(-1));
    $('#tabs').tabs('select', newTabIndex);
}

Further Reading: