Question

我有jquery-ui生成的两个标签。我在Tab1中执行某些操作，并在单击按钮时，有一个AJAX调用，它在Tab2中显示结果。

所以我想更改按钮上的活动标签（在ajax调用完成后）。我可以这样做吗？

我创建了一个jsFiddle here

我尝试了onclick='$("#tabs-2").trigger("click") '>，但它没有做任何事情。

Answer 1

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

（http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method）

使用选项方法，例如：

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

Answer 2

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

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

Answer 3

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>

Answer 4

你必须在“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/

Answer 5

你也可以尝试

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

那是因为你无法在就绪模式下触发调用tabs（）。 document.ready早于window.load执行。

单击按钮更改活动选项卡

5 个答案: