UI-BTN-アクティブクラスは

を削除取得私は、次のしている：UI-BTN-アクティブクラスは

<body id="body"> 
<div data-role="header" id="header"> 
<div data-role="navbar" id="navbar"> 
<ul> 
    <li><a class="ui-state-persist ui-btn-active" data-ajax="true" href="#pagex">Ouch</a></li> 
    <li><a class="ui-state-persist " data-ajax="true" href="#pagey">Wow</a></li> 
</ul> 
</div> 
</div> 

<div data-role="page" id="pagex"> 
</div> 
<div data-role="page" id="pagey"> 
</div> 
</body>

ツールバーが外部であることに注意してください。現在のページをアクティブにするには、次のjavascriptが必要です。

$(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-アクティブクラスは

答えて

関連する問題