ui-btn-active class 被移除

Question

我有以下内容：

<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");
});

不幸的是，它仍然不起作用。菜单项将短暂突出显示，然后恢复正常。

Answer 1

按照此处的演示进行操作：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>

ui-btn-active class 被移除

ui-btn-active class getting removed

javascript

jquery-mobile