jquery mobile在導航過程中沒有保持按鈕狀態

Question

當我在jquery中從一個頁面轉到另一個頁面，並使用瀏覽器後退按鈕返回上一頁時，上一頁的導航欄項目的選項卡狀態不會保留。請幫助

Answer 1

您是否在導航欄中使用class="ui-btn-active ui-state-persist"來保持標籤狀態？

檢查在link

Answer 2

問題與jQuery Mobile和其navbar給出的例子是在更改頁面的過程。當您點擊navbar項目時，您將立即初始化更改頁面過程，並且正確的樣式不會正確應用。但即使它們被正確應用，由於改變了頁面過程，它們也不會被傳播到DOM。

在這種情況下，我們需要手動完成。你想要做的是刪除#href從你的navbar li元素或用＃替換它的值。將單擊事件添加到相同的li元素。

當用戶點擊導航欄一個JavaScript的標籤必須刪除所有可用類呼籲：ui-btn-active和ui-state-persist。如果你在每個頁面都有一個導航欄，那麼讓它們都有一個相同的名字，因爲這個javascript將需要通過所有的頁面。當所有這些類都刪除，然後再次添加它們，但這次只能點擊/選擇navbar項目。

現在手動初始化jQuery Mobile的changePage函數，讓它轉換到需要的頁面。當changePage函數結束其轉換時，navbar元素將被選中（如果您點擊後退按鈕，它也會在前一頁中被選中）。

工作例如：http://jsfiddle.net/Gajotres/6h7gn/

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).off('click', '#custom-navbar li').on('click', '#custom-navbar li', function(e){ 
     var selectedLi = $(this); 
     $('#custom-navbar li').each(function(index) { 
      var loopLi = $(this); 
      if(loopLi.find('a').hasClass('ui-btn-active') || loopLi.find('a').hasClass('ui-state-persist')) { 
       loopLi.find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist'); 
      } 
      if(loopLi.attr('id') == selectedLi.attr('id')) { 
       loopLi.find('a').addClass('ui-state-persist'); 
      } 
     });    
     setTimeout(function(){ 
      $.mobile.changePage(selectedLi.find('a').attr('data-href'), { transition: "slide"}); 
     },100); 
    });  
});