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

我正在使用JQuery移动选项卡。基于某些条件，我想要选择第二个选项卡，显示相应的选项卡视图。感谢帮助:)在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); 
    } 
});

来源

2014-09-04 Sumanth Pai

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

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

然后设置活动标签：

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

执行此操作时，相应的选项卡按钮不会改变颜色。所以，你要么需要与UI BTN-活动类添加到该按钮，或触发按钮点击，而不是设置的活动标签，如：

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

来源

2014-09-04 15:38:44 ezanker

ezanker：我使用'$（secondTab）.trigger（ “点击”）;'这似乎工作，但我们可以清楚地看到从第一个标签到第二个标签的过渡。我想知道，是否有办法隐藏过渡。无论如何感谢您的答复。 – 2014-09-07 06:55:31

@Sumanth，你可以使用第一个选项，并在选项卡按钮上设置ui-btn-active类：http://jsfiddle.net/ezanker/a84dajrv/ – ezanker 2014-09-07 22:52:13

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

回答

相关问题