jQuery移動選項卡不活動

Question

我有一個動態列表，它會轉到一個新頁面，並且兩個選項卡中的一個選項卡處於活動狀態而不被按下（這是我要執行的操作。），但是當我返回到動態列表並選擇其他任何列表時，到新頁面，但沒有激活任何選項卡，兩個選項均顯示為空白。

這是我的動態新頁面的代碼（函數）

function goToMatchDetailPage(matchHome, matchAway){
    first_part_id = matchHome.substring(0,2);
    sec_part_id = matchAway.substring(0,2);
    var id = first_part_id.concat(sec_part_id);
    //create the html template
    var matchPage = $("<div data-role='page' id='index' data-url=dummyUrl><div data-role='header'><a data-rel='back' data-direction='reverse' href='#mainPage'>Back</a><h1>"
      + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
  + "<div data-role='navbar'>"
  +  "<ul>"
  +    "<li><a href='#fragment-1' id='tabId1'>" + matchHome + "</a></li>"
  +   "<li><a href='#fragment-2' id='tabId2'>" + matchAway + "</a></li>"
  +  "</ul>"
  + "</div>"
  + "<div id='fragment-1'>"
  +  "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
  + "</div>"
  + "<div id='fragment-2'>"
  +  "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
  + "</div></div></div>");


    //append the new page to the page contanier
    matchPage.appendTo($.mobile.pageContainer);


    //go to the newly created page
    $.mobile.changePage(matchPage);

 }


 $(document).on('pageinit', function() {

     $(this).parents("div [data-role=tabs]").tabs( "option", "active", 0 );    

       $('#tabId2').addClass('ui-btn-up-b').removeClass('ui-btn-active');
       $('#tabId1').addClass('ui-btn-active'); 

    });

在這里，我嘗試在創建新頁面時重新激活選項卡

$(document).on('pageshow', function() {

     $.mobile.activePage.find("div [data-role=tabs]").tabs( "option", "active", 0 );    

       $('#tabId2').addClass('ui-btn-up-b').removeClass('ui-btn-active');
       $('#tabId1').addClass('ui-btn-active'); 

    });

它顯示時沒有選項卡處於活動狀態

Answer 1

我認為這是簡單的方法。 只需點擊選項卡按鈕即可：

$(document).on('pageshow', function() {    
   $('#tabId1').click();     
});

DEMO

要使其更加通用，請在頁面上找到第一個標簽按鈕，而不要使用ID：

$(document).on('pageshow', function() {    
    $.mobile.activePage.find("div [data-role=tabs] ul li:first-child a").click();
});

DEMO