UI-btn을 활성 클래스는 나는 다음과 같은 한

을 제거하기. 따라서 현재 페이지를 활성화하려면 다음 javascript가 필요합니다.UI-btn을 활성 클래스는 나는 다음과 같은 한

$(document).on('pageshow',function(event,ui){ 
    // disable previous selected links 
    $('[data-role=navbar] a').removeClass("ui-btn-active"); 
    var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]'); 
    menuLink.addClass("ui-btn-active"); 
});

불행히도, 여전히 작동하지 않습니다. 메뉴 항목이 잠깐 강조 표시되고 다시 정상으로 돌아갑니다. 여기 데모 다음

출처

2017-11-30 StevieD

: Updating toolbar contents 다음과 같이 단지는 pagecontainerchange 이벤트 내부에 코드를 삽입 할 필요가 :

$(document).ready(function() { 
 
    $("#navbar").navbar(); 
 
    $("#header").toolbar(); 
 
}); 
 

 
$(document).on("pagecontainerchange", function(e, ui) { 
 
    $("#navbar ui-btn-active").removeClass("ui-btn-active"); 
 
    var toPage = "#"+$(ui.toPage).attr("id"); 
 
    $("#navbar a[href="+toPage+"]").addClass("ui-btn-active"); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="header" data-theme="a" id="header"> 
 
    <div data-role="navbar" data-theme="a" id="navbar"> 
 
     <ul> 
 
     <li><a class="ui-state-persist ui-btn-active" href="#pagex">Ouch</a></li> 
 
     <li><a class="ui-state-persist" href="#pagey">Wow</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div id="pagex" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     Page x 
 
    </div> 
 
    </div> 
 
    <div id="pagey" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     Page y 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2017-11-30 09:47:37 deblocker

UI-btn을 활성 클래스는 나는 다음과 같은 한

답변

관련 문제