Rogtopia

I have recently been working on a project using jQuery UI tabs (http://jqueryui.com/demos/tabs/).  After sifting through the documentation, I could not find any particular method for just calling the next tab in my own custom navigation.  There is a lot of great events that you can hook into by creating callbacks, and a lot of great properties and methods; even one for selecting a tab.   However, there is no nextTab() or next().

Well, here is nextTab() that works with UI Tabs:

<script type="text/javascript">
function nextTab(_tab_selector) {
  var num_tabs = $('#tabs li',$(_tab_selector)).length;
  var current = $(_tab_selector).tabs('option','selected');
  var next = ((current + 2)>num_tabs) ? 0 : current + 1;
  $(_tab_selector).tabs('select',next);
}
</script>

This function will continue through a tab system until it reaches the end and continue to the beginning. Simply call it from your own custom link such as:

<a href="javascript:" onclick="nextTab('#mytabs');">Next Tab</a>

Or, you could bind them to the click event of a class selector:

<a href="#mytabs" class="next-tab">Next Tab</a>

<script type="text/javascript">
$('.next-tab').bind('click', function() { 
  nextTab($(this).attr('href'));
});
</script>

Of course, you could easily create a previous tab method by modifying the increments to decrements. You could even create some custom callback events that could be triggered. However, this is a minimalistic nextTab method that does it's job just fine. Happy coding