单击按钮时更改活动选项卡

Question

我有两个由 jquery-ui 生成的选项卡。我在 Tab1 中执行某些操作，然后单击按钮，就会有一个 AJAX 调用在 Tab2 中显示结果。

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

我创建了一个 jsFiddle here

---

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

Answer 1

作为信息（以防有人稍后偶然发现这一点并在 select 方法上遇到错误） - 在 jQuery-UI 1.9+ 中， select 方法已被弃用。

（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小提琴

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

< strong>这是代码的 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 执行。