JQuery UI, переход на новую вкладку программно

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

  <script type="text/javascript">
  $(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>

<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. Кроме того, соответствующая панель не отображается.

Ответы

Ответ 1

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

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

Ответ 2

Для JQUERY UI 1.9+ метод выбора устарел (http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)

(из документации)

Старый API:

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

Новый API:

// Activate the third panel
$( "#tabs" ).tabs( "option", "active", 2 );

Ответ 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 );
        });
});

Вот теги "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>

Ответ 4

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






    });

Ответ 5

Я изменил решение @Mahesh Vemuri, добавив возможность отключить шаги, следующие за первым, а затем включить их после нажатия кнопки "СЛЕДУЮЩИЙ":

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 Form Validation.