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 您只需要将代码放在encoding: URLEncoding.default事件中，如下所示：

＆＃13;

pagecontainerchange

＆＃13;

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

＆＃13;

ui-btn-active类被删除

1 个答案: