Изменить активную вкладку при нажатии кнопки

Question

У меня есть две вкладки, сгенерированные jquery-ui.Я делаю что-то в Tab1 и по нажатию кнопки происходит вызов AJAX, который отображает результаты в Tab2.

Поэтому я хочу изменить активную вкладку при нажатии кнопки (после завершения вызова ajax).Могу ли я сделать это?

Я создал jsFiddle здесь

---

Я попытался onclick='$("#tabs-2").trigger("click") '>, но ничего не получилось.

Answer 1

В качестве информации (в случае, если кто-то наткнется на это позже и получит ошибку при выборе метода) - В jQuery-UI 1.9+, метод выбора устарел.

(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)

Используйте метод option, например:

$("#tabs").tabs("option", "active", 2);

Answer 2

Использование onclick='$("#tabs").tabs( "select", "tabs-2" )'

http://jqueryui.com/demos/tabs/#method-select

Answer 3

js fiddle

http://jsfiddle.net/maheshvemuri/M7Fdu/

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

Вы должны сделать триггерный вызов "a" внутри "li", а не прямо на вкладку "div", как это сделано.

<div id="tabs">     
    <ul>
        <li><a id="lnk1" href="#tabs-1">tab1</a></li>   
        <li><a id="lnk2" href="#tabs-2">tab2</a></li>             
    </ul>    
    <div id="tabs-1">
     <button type="button" id="clicktab2" onclick='$("#lnk2").trigger("click");'>
       go to tab2
     </button>
    </div>
    <div id="tabs-2">
     tab2 content 
    </div>
</div>

Пример:

http://jsfiddle.net/Tf9sc/152/

Answer 5

Также вы можете попробовать

$(window).load(function(){
   $('#tabs-2').trigger('click');
});

, потому что вы не можете вызвать вызов tabs () в режиме готовности.document.ready выполняется раньше, чем window.load.