Функциональность Next-Prev для вкладок jquery

Мне нужна следующая, предыдущая функциональность для вкладок jquery при нажатии кнопок Next и Prev html. Я использую файлы 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 возвращает ноль. Что не так в реализации. Пожалуйста, предложите.


jquery jquery-ui jquery-ui-tabs jquery-tabs
person Rajaram Shelar    schedule 10.04.2013    source источник
comment
Можете ли вы показать нам часть вашей HTML-разметки?   -  person Derek    schedule 10.04.2013
comment
@Derek: Пожалуйста, посмотрите мой отредактированный вопрос.   -  person Rajaram Shelar    schedule 11.04.2013

Ответы (2)


arrow_upward
0
arrow_downward

В этой версии нет метода select для вкладок пользовательского интерфейса jQuery. Чтобы заставить вашу функциональность работать, вам нужно изменить свой код на

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)

Это сработало для меня. Попробуй это.

person Kitty    schedule 16.04.2013
comment
Ооо.. Спасибо Китти. Я просто задавался вопросом, почему это не работает. Большое спасибо за твою помощь. - person Rajaram Shelar; 16.04.2013

arrow_upward
1
arrow_downward

Это работает для меня:

$( "#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/

person DarkAjax    schedule 10.04.2013
comment
Я использовал ваш код, но все же он дает мне нулевое значение для функции GetSelectedTabIndex() - person Rajaram Shelar; 11.04.2013
comment
Это действительно странно, я только что обновил демо-скрипку, и вы можете видеть, что сначала она предупреждает 0, у меня это работает в Google Chrome 26, какой браузер вы используете? - person DarkAjax; 11.04.2013
comment
Я использую jquery-ui-1.10.2.custom.js. Разве это не создает проблемы? - person Rajaram Shelar; 11.04.2013