Как программно переключиться на новую вкладку пользовательского интерфейса jQuery?

Я создаю «выезд», например взаимодействие с вкладками пользовательского интерфейса jQuery. Это означает, что нажатие кнопки на первой вкладке деактивирует первую вкладку и переместит ее на следующую. Я просматривал сообщения о переполнении стека, но ничего из того, что я пробовал, не работает. Я использую jQuery UI 1.8, вот код:

$(document).ready(function() {
    var $tabs = $('#tabs').tabs({ selected: 0 }); 
    $tabs.tabs('option', 'selected', 0);
    $("#tabs").tabs({disabled: [1,2]});
    $("#addstudent").click(function(){
        $tabs.tabs('option', 'selected', 1);
        $("#tabs").tabs({disabled: [0,2]});
    }); 
    $("#confirm").click(function(){
        $tabs.tabs('option', 'selected', 2);
        $("#tabs").tabs({disabled: [0,1]});
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1">Student Information</a></li>
        <li><a href="#fragment-2">Confirmation</a></li>
        <li><a href="#fragment-3">Invoice</a></li>
    </ul>
    <div id="fragment-1">
        <button id="addstudent" >Add Student</button>
    </div>
    <div id="fragment-2">
        <button id="confirm" >Confirm</button>
    </div>
    <div id="fragment-3">
        tab 3, index 2
    </div>
</div>

Когда я нажимаю кнопки, следующая вкладка становится разблокированной (в том смысле, что ее можно выбрать), но она не отключает вкладку с индексом 0 и не переключается на вкладку с индексом 1. Кроме того, соответствующая панель не отображается.


jquery jquery-ui jquery-ui-tabs
person Faiyet    schedule 30.08.2011    source источник

Ответы (4)


arrow_upward
17
arrow_downward

Попробуйте изменить свой код на это:

var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] }); 
$("#addstudent").click(function(){
   $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);        
}); 
$("#confirm").click(function(){
    $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);    
});

Пример JSBin

person Richard Dalton    schedule 30.08.2011
comment
для новой версии jQuery вам может потребоваться использовать ответ, показанный ниже. $( #tabs ).tabs( option, active, 2 ); - person PHPGuru; 24.01.2014

arrow_upward
95
arrow_downward

В jQuery UI 1.9+ метод select объявлен устаревшим в API. В версии 1.9+ вместо этого вам нужно использовать option и active.

Из документации:

Старый API:

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "select", 2 );

Новый API:

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "option", "active", 2 );
person Aaron Sherman    schedule 24.01.2013

arrow_upward
3
arrow_downward

@ Аарон Шерман уже ответил на ваш вопрос. Вот подробный шаг.

Вот часть кода JS:

$(document) .ready(function() {
    $("#tabs").tabs(); 
    $(".btnNext").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
        });
        $(".btnPrev").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
        });
});

Вот теги «a href», которые нужно добавить в раздел вкладок.

Пример:

<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
person RecklessSergio    schedule 30.10.2013

arrow_upward
2
arrow_downward

Я изменил решение @Mahesh Vemuri, добавив возможность отключить шаги, следующие за первым, а затем включить их после нажатия кнопки «ДАЛЕЕ»:

JS-код:

$(document) .ready(function() {
    $("#tabs").tabs(); 

    $("#tabs").tabs( "option", "disabled", [ 1, 2 ] );

    $(".btnNext").click(function () {
        $("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });

    $(".btnPrev").click(function () {
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
    });
});

HTML такой же.

PS: Обратите внимание, что с этим кодом нажатие кнопки «ДАЛЕЕ» активирует следующую вкладку (ранее отключенную), но нажатие кнопки «ПРЕД» не отключит текущую вкладку, чтобы позволить пользователю переходить вперед и назад в последовательном потоке до следующей отключенной вкладки. .

Надеемся, что если вкладки содержат 3 шага формы, действие кнопки NEXT может быть запущено только в том случае, если Проверка формы JS пройдет успешно.

person Luca Detomi    schedule 23.09.2014