Next-Prev functionality for the jquery tabs

Question

I need Next, Previous functionality for the jquery tabs on clicking on the Next and Prev html buttons. I am using jquery.1.9.1.js and jquery-ui-1.10.2.custom.js file. I have implemented below code but does not work for me.

<script language="javascript" type="text/javascript">
    $(function () {
        $("#ui-tabs").tabs();
        function GetSelectedTabIndex() {
            return $('#ui-tabs').tabs('option', 'selected');
        }

        function ShowTabs(stepNum) {
            var num = parseInt(stepNum);
            $('#ui-tabs').tabs('option', 'active', parseInt(GetSelectedTabIndex()) +  num);
        }

        $('#prev').click(function () {
            ShowTabs(-1);
        })

        $('#next').click(function () {
            ShowTabs(-1);
        })
    });
</script>

<div id="ui-tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">Tab1 content </div>
    <div id="tabs-2">Tab2 content </div>
    <div id="tabs-3">Tab3 content </div>
</div>
<a id="prev" class="button-style" href="#">Prev</a>
&nbsp;<a id="next" class="button-style" href="#">Next</a>

But GetSelectedTabIndex returns null. What is wrong in the implementation. Please suggest.

Answer 1

There is no select method for jQuery UI Tabs in this version. To get your functionality to work you need to change your code to

var i=$('#ui-tabs').tabs( "option", "active"); //get selected tab index
$('#ui-tabs').tabs( "option", "active", i+num ); // num is your tab choise (+1,-1)

This is worked for me. Try this.