在JQuery移动选项卡视图中选择第二个选项卡

Question

我正在使用JQuery移动标签。基于某些条件，我希望选择第二个选项卡，显示相应的选项卡视图。感谢帮助：）

<!-----HTML------->
<div class="custom-tabs" id="tabDiv">
    <div data-role="navbar" class="">
        <ul>
            <li name=""><a href="#one" id="firstTab" data-ajax="false" data-theme="c">Tab 1</a></li>
            <li name=""><a href="#two" id="secondTab" data-ajax="false" data-theme="c">Tab 2</a></li>
        </ul>
    </div>
     <!--- First Tab --->
    <div id="one" class="tab-content-wrap" name="tabOneContentId"></div>

    <!--- Second Tab --->
    <div id="two" class="tab-content-wrap" name="tabTwoContentId"></div>            
</div>


<!------JS------>
$(document).on("pagebeforeshow", "#requestServiceHome", function() {
    $("#tabDiv").tabs();
    if(flag == true){
        $('#tabDiv').tabs("option", "select", 1 );
    }
});

Answer 1

您需要在容器DIV上使用data-role="tabs"：

<div class="custom-tabs" id="tabDiv" data-role="tabs">

然后设置活动标签：

$('#tabDiv').tabs("option", "active", 1 );

执行此操作时，相应的选项卡按钮不会更改颜色。因此，您需要将ui-btn-active类添加到按钮，或触发按钮单击而不是设置活动选项卡，例如：

$("#secondTab").click();