jQuery选项卡的下一个功能 [英] Next-Prev functionality for the jquery tabs

问题描述

在单击Next和Prev html按钮时，我需要jquery选项卡的Next，Previous功能.我正在使用jquery.1.9.1.js和jquery-ui-1.10.2.custom.js文件.我已经实现了以下代码，但对我不起作用.

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>

但是GetSelectedTabIndex返回null.实施中有什么问题.请提出建议.

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

推荐答案

此版本中没有用于jQuery UI Tabs的select方法.要使您的功能正常工作，您需要将代码更改为

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.

这篇关于jQuery选项卡的下一个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！