下一步，后退功能为jQuery的标签(Next-Prev functionality for the

我需要接下来，以前的功能上单击Next和Prev HTML按钮jquery的标签。 我使用jquery.1.9.1.js和jquery-ui-1.10.2.custom.js文件。 我已经实现下面的代码，但对我不起作用。

<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>

但GetSelectedTabIndex返回null。 什么是错在执行。 请建议。

Answer 1:

没有select在这个版本的jQuery UI选项卡的方法。 为了让您的功能工作，你需要改变你的代码

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)

这是为我工作。 试试这个。

Answer 2:

这对我的作品：

$( "#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);
}

这在我看来，有一个在使用没有点$tabs变量，因为它是您的本地GetSelectedTabIndex功能，它只是每个函数调用中使用一次...

演示： http://jsfiddle.net/darkajax/A8ejN/

Answer 3:

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#ui-tabs").tabs();
    });
    function GetSelectedTabIndex() {
        var $tabs = $('#ui-tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        return selected;
    }

    function ShowTabs(stepNum) {
        var num = parseInt(stepNum);
        $('#ui-tabs').tabs('select', parseInt(GetSelectedTabIndex()) + num);
    }
</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>

文章来源: Next-Prev functionality for the jquery tabs