单击按钮更改活动选项卡答案

【问题标题】：Change active tab on button click单击按钮更改活动选项卡
【发布时间】：2011-11-02 13:04:38
【问题描述】：

我有两个由jquery-ui 生成的标签。我在 Tab1 中做了一些事情，然后单击按钮，有一个 AJAX 调用在 Tab2 中显示结果。

所以我想更改按钮单击时的活动选项卡（在 ajax 调用完成后）。我可以这样做吗？

我创建了一个 jsFiddle here

我试过onclick='$("#tabs-2").trigger("click") '>，但它什么也没做。

【问题讨论】：

你用什么来生成你的标签？ jQuery-UI？
@chesles：是的，通过 jquery-ui。更新了我的问题。

标签： ajax jquery-ui jquery-tabs

【解决方案1】：

您必须对“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>

例子：

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

【讨论】：

【解决方案2】：

js 小提琴

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

这是要添加到标签 div 中的“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>

【讨论】：

你有 JSFiddle 吗？
@Francisco Corrales。我已经添加了。请看一下。

【解决方案3】：

使用onclick='$("#tabs").tabs( "select", "tabs-2" )'

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

【讨论】：

或 onclick='$( "#tabs" ).tabs( "select" , 1 )' 但这有点令人困惑，因为 tabs-2 的索引是 1 :-) 谢谢。

【解决方案4】：

你也可以试试

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

那是因为您无法在就绪模式下触发调用 tabs()。 document.ready 比 window.load 更早执行。

【讨论】：

【解决方案5】：

作为信息（以防有人后来偶然发现并在 select 方法上出错） - 在 jQuery-UI 1.9+ 中，不推荐使用 select 方法。

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

使用选项方法，例如：

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

【讨论】：