Jquery移動選項卡不活動

我有一個動態列表進入一個新頁面，兩個選項卡中的一個活動而不被按下（這是我正在嘗試做的）。但是當我回到動態列表並選擇任何其他列表進入新頁面，但沒有任何選項卡激活都顯示爲普通。Jquery移動選項卡不活動

這裏是我的

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'); 

    });

它出現時沒有標籤頁

This is what I don't want

來源

2014-04-05 user3210416

爲什麼在pageinit上使用.parents（）？該選項卡是頁面的子項，因此請嘗試$（this）.find（「div [data-role = tabs]」）。tabs（「option」，「active」，0）; – ezanker

它給了我相同的結果，第一次去新頁面時效果很好，但是當我再次嘗試時，它不起作用。 – user3210416

對不起，pageinit只被調用一次，你可以把它放在每次顯示頁面時都會運行的pageshow中。此外，而不是$（this），您可以使用$ .mobile.activePage – ezanker

我認爲這是簡單的方法。只是觸發的標籤按鈕點擊：

$(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

來源

2014-04-05 16:44:40 ezanker

感謝您的答案很好，但一旦一個問題解決了另一個問題是原因。 Jquery正在成爲一門相當複雜的學習語言。我知道html，css，php和js，但是jquery我仍然試圖弄明白。你如何得到如此好的回答我之前關於刷卡的問題 – user3210416

我不是很好，我只是不停地玩弄它，並隨着我的發現而發現......你會像練習一樣，學習。 – ezanker

大聲笑，我看看你的個人資料，你回答了很多，有沒有辦法與你聯繫，或者你可以聯繫我關於我的jquery輕掃你。新頁面上的滑動功能正在發生同樣的事情。 – user3210416

Jquery移動選項卡不活動

回答

相關問題