2014-09-04 2 views
0

Я использую вкладку мобильных устройств 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); 
    } 
}); 

ответ

0

Вам нужен data-role="tabs" на контейнере DIV:

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

Затем установить активную вкладку:

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

Когда вы сделаете это, соответствующую кнопку вкладки не меняет цвет. Таким образом, вам необходимо либо добавить UI-БТН-активный класс кнопки, или вызвать кнопку мыши вместо установки активной вкладки, например:

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

ezanker: Я использую '$ (secondTab) .trigger («щелчок»), который, кажется, работает, но мы можем четко видеть переход от первой вкладки ко второй. Мне было интересно, если есть способ скрыть переход. В любом случае спасибо за ответ. –

+0

@Sumanth, вы можете использовать первый вариант и установить класс ui-btn-active на вкладке: http://jsfiddle.net/ezanker/a84dajrv/ – ezanker

Смежные вопросы