ajax 单击按钮时更改活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7171504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change active tab on button click
提问by Radek
I have two tabs generated by jquery-ui. I do something in the Tab1 and on a button click, there is an AJAX call which displays the results in Tab2.
我有两个由jquery-ui. 我在 Tab1 中执行了一些操作，然后单击按钮，有一个 AJAX 调用在 Tab2 中显示结果。
So I want to change the active tab on button click( after the ajax call finishes ). Can I do so?
所以我想更改按钮单击时的活动选项卡（在 ajax 调用完成后）。我可以这样做吗？
I've created a jsFiddle here
我在这里创建了一个 jsFiddle
I tried onclick='$("#tabs-2").trigger("click")
'>but it didn't do anything.
我试过了，onclick='$("#tabs-2").trigger("click")
'>但它什么也没做。
回答by IniTech
As info (in case someone stumbles upon this later and gets an error on the select method) - In jQuery-UI 1.9+, the select method was deprecated.
作为信息（以防有人稍后偶然发现并在 select 方法上出错） - 在 jQuery-UI 1.9+ 中，不推荐使用 select 方法。
(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)
（http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method）
Use the option method, example:
使用选项方法，例如：
$("#tabs").tabs("option", "active", 2);
回答by krasu
Use onclick='$("#tabs").tabs( "select", "tabs-2" )'
用 onclick='$("#tabs").tabs( "select", "tabs-2" )'
回答by Mahesh Vemuri
js fiddle
js小提琴
http://jsfiddle.net/maheshvemuri/M7Fdu/
http://jsfiddle.net/maheshvemuri/M7Fdu/
Here is JS part of the code:
这是代码的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 );
});
});
Here are the "a href" tags to be added in your tabs div
这是要添加到标签 div 中的“a href”标签
Example:
例子：
<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>
回答by eladolo
You have to make the trigger call to "a" inside the "li", not direct to the tab "div" like it's done.
您必须在“li”中对“a”进行触发调用，而不是像完成时那样直接调用选项卡“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>
Example:
例子：
回答by Enziz
Also you can try
你也可以试试
$(window).load(function(){
$('#tabs-2').trigger('click');
});
that's because you cannot trigger call the tabs() in ready mode. document.ready is executed earlier than window.load.
那是因为您无法在就绪模式下触发调用 tabs()。document.ready 比 window.load 更早执行。
