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

Question

Я создаю взаимодействие типа "оформить заказ" с вкладками пользовательского интерфейса jQuery.Это означает, что нажатие кнопки на первой вкладке отключит первую вкладку и перейдет к следующей.Я просматривал посты в Stack Overflow, но ничего, что я пробовал, похоже не работает.Я использую 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. Также соответствующая панель не отображается.

Answer 1

Для jQuery UI 1.9+, метод выбора устарел в 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 );

Answer 2

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

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

Answer 3

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

Вот часть кода 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

Пример:

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

Answer 4

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

JScode:

$(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: Обратите внимание, что с помощью этого кода нажатие кнопки NEXT активирует следующую вкладку (ранее отключено), но нажатие кнопкиКнопка PREV не отключит текущую вкладку, чтобы позволить пользователю переходить назад и вперед в последовательный поток до следующей отключенной вкладки.

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

Answer 5

$(function() {
    $( "#tabs" ).tabs({ activate: function(event ,ui){
        //console.log(event);
        //alert(  ui.newTab.index());
        //alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);

        alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
        //alert( this.text);
    } });
});